webentwicklung-frage-antwort-db.com.de

Affix funktioniert nicht in Bootstrap 4 (Alpha)

Gemäß Bootstrap 3-Dokumenten habe ich einer Navigationsleiste folgende Attribute hinzugefügt:

<nav class="navbar no-margin-bottom" data-spy="affix" data-offset-top="90" >
...
</nav>

Nach dem Scrollen der Seite fügt Bootstrap 4 der Navigationsleiste keine Klasse hinzu. Kann mir jemand sagen, wie ich dieses Problem lösen kann? Bootstrap.js und jQuery.js funktionieren.

9
Ilyas karim

Obwohl der Affix in Version 4 aus Bootstrap entfernt wird, können Sie Ihr Ziel durch diesen jQuery-Code erreichen:

$(window).on('scroll', function(event) {
    var scrollValue = $(window).scrollTop();
    if (scrollValue == settings.scrollTopPx || scrollValue > 70) {
         $('.navbar').addClass('fixed-top');
    } 
});
14
Anwar Hussain

Aus der Dokumentation zu bootstrap v4:

Dropped das Affix-Plugin für jQuery. Wir empfehlen, stattdessen einen position: sticky polyfill zu verwenden. Siehe den HTML5-Please-Eintrag für Details und spezielle Polyfill-Empfehlungen.

Wenn Sie Affix zum Anwenden zusätzlicher Nicht -position -Stile verwendet haben, unterstützen die Polyfills möglicherweise Ihren Anwendungsfall nicht. Eine Option für solche Anwendungen ist die ScrollPos-Styler -Bibliothek eines Drittanbieters.

10
Vucko

Update Bootstrap 4

Die Dokumente empfehlen die klebrige Füllung, und der empfohlene ScrollPos-Styler hilft nicht bei der Bildlaufposition (Sie können leicht einen Versatz definieren).

Ich denke, es ist einfacher, mit jQuery das Scrollen des Fensters zu beobachten und das CSS entsprechend zu ändern.

  var toggleAffix = function(affixElement, wrapper, scrollElement) {

    var height = affixElement.outerHeight(),
        top = wrapper.offset().top;

    if (scrollElement.scrollTop() >= top){
        wrapper.height(height);
        affixElement.addClass("affix");
    }
    else {
        affixElement.removeClass("affix");
        wrapper.height('auto');
    }

  };


  $('[data-toggle="affix"]').each(function() {
    var ele = $(this),
        wrapper = $('<div></div>');

    ele.before(wrapper);
    $(window).on('scroll resize', function() {
        toggleAffix(ele, wrapper, $(this));
    });

    // init
    toggleAffix(ele, wrapper, $(window));
  });

Bootstrap 4-Fixierung (sticky navbar)

EDIT: Eine andere Lösung ist, diesen Port des 3.x Affix Plugins als Ersatz in Bootstrap 4 zu verwenden.

http://www.codeply.com/go/HmY7DLHLkI


Verwandte Themen: Animieren/Verkleinern der NavBar beim Scrollen mit Bootstrap 4

10
Zim

Laut Vuckos Zitat in den Mirgation-Dokumenten passte die Bibliothek ScrollPos-Styler sehr gut zu mir. 

  1. Fügen Sie der Datei die .js ScrollPos-Styler (scrollPosStyler.js) -Datei hinzu.
  2. Finden Sie den relevanten <div>, den Sie "klebrig" machen möchten

<nav class="navbar navbar-toggleable-md">

  1. Übernehmen Sie die sps sps--abv-Klasse

<nav class="navbar navbar-toggleable-md sps sps--abv">

  1. Fügen Sie .css-Stile hinzu, die ausgelöst werden sollen, wenn das Element klebrig geworden ist (wie in der Demoseite .

/** 
 * 'Shared Styles' 
**/
.sps {

}

/** 
 * 'Sticky Above' 
 *
 * Styles you wish to apply
 * Once stick has not yet been applied
**/
.sps--abv {
   padding: 10px
}

/** 
 * 'Sticky Below' 
 *
 * Styles you wish to apply
*  Once stick has been applied
**/
.sps--blw {
   padding: 2px
}
2
MackieeE

Um auf Anwar Hussains Antwort zu bauen. Ich habe Erfolg damit gefunden:

$(window).on('scroll', function (event) {
    var scrollValue = $(window).scrollTop();
    if (scrollValue > 120) {
        $('.navbar').addClass('affix');
    } else{
        $('.navbar').removeClass('affix');
    }
});

Dadurch wird die Klasse beim Scrollen nach unten auf die Navigationsleiste angewendet, aber auch beim Zurückblättern wird die Klasse entfernt. Bisher wurde beim Zurückblättern die angewendete Klasse auf die Navigationsleiste angewendet.

2
Kyle Higginson
$(window).on('scroll', function (event) {
    var scrollValue = $(window).scrollTop();
    var offset = $('[data-spy="affix"]').attr('data-offset-top');
    if (scrollValue > offset) {
        $('[data-spy="affix"]').addClass('affix-top');
        var width = $('[data-spy="affix"]').parent().width();
        $('.affix-top').css('width', width);
    } else{
        $('[data-spy="affix"]').removeClass('affix-top');
    }
}); 
1
TranDuc

Für Benutzer, die nach einer Antwort in reinem Javascript suchen, können Sie dies mit reinem Javascript tun:

window.onscroll = (e) => {
    let scrollValue = window.scrollY;
    if (scrollValue > 120) {
        document.querySelector('.navbar').classList.add('affix');
    } else{
        document.querySelector('.navbar').classList.remove('affix');
    }
}
0
Ilyas karim

Nachdem ich jede Lösung ausprobiert hatte (und wusste, dass Affix von Bootstrap 4 entfernt wurde), konnte ich nur die gewünschten Ergebnisse erzielen, indem ich sticky-kit verwendete.

Dies ist ein wirklich einfaches jQuery-Plugin, das einfach einzurichten war.

Fügen Sie einfach den Code in Ihr Projekt ein und weisen Sie dann das Element zu, mit dem Sie bleiben möchten 

$("#sidebar").stick_in_parent();
0
DazBaldwin

verwenden Sie einfach die Klasse fixed-top in bootstrap 4 und verwenden Sie addClass und removeClass

$(window).on('scroll', function(event) {
    var scrollValue = $(window).scrollTop();
    if ( scrollValue > 70) {
         $('.navbar-sticky').addClass('fixed-top');
    }else{
       $('.navbar-sticky').removeClass('fixed-top');
    }
});
0
Vahid Alvandi