词缀在 Bootstrap 4 (alpha) 中不起作用

Question

According to Bootstrap 3 docs I have added following attributes to a navbar:

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

After scrolling down the page Bootstrap 4 is not adding class to navbar which is affix. Can anyone tell me how to solve this problem? Bootstrap.js and jQuery.js are working.

Answer 1

Although the affix is removed from Bootstrap in version 4. However, you can achieve your goal through this jQuery Code:

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

Answer 2

Update Bootstrap 4

The docs recommend the sticky polyfill, and the recommended ScrollPos-Styler doesn't really help with scroll position (you can easily define an offset).

I think it's easier to use jQuery to watch the window scroll and change the CSS accordingly to fixed...

  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 affix (sticky navbar)

EDIT: Another solution is to use this port of the 3.x Affix plugin as a replacement in Bootstrap 4..

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

---

Related: Animate/Shrink NavBar on scroll using Bootstrap 4

Answer 3

From the bootstrap v4 documentation:

Dropped the Affix jQuery plugin. We recommend using a position: sticky polyfill instead. See the HTML5 Please entry for details and specific polyfill recommendations.

If you were using Affix to apply additional, non- position styles, the polyfills might not support your use case. One option for such uses is the third-party ScrollPos-Styler library.

Answer 4

To build on Anwar Hussain's answer. I found success with this:

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

This will apply the class to the navbar when scrolling down, but will also remove the class when scrolling back up. Previously, when scrolling back up, the applied class would stay applied to the navbar.

Answer 5

As per Vucko's quote within the Mirgation docs, ScrollPos-Styler library suited me quite well.

1. Include the .js ScrollPos-Styler ( scrollPosStyler.js ) file to your page.
2. Find the relevant <div> you wish to make 'sticky'

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

3. Apply sps sps--abv class

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

4. Add .css styles you wish to have triggered once the element has become sticky (As per the demo page .

---

/** 
 * '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
}

Answer 6

$(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');
    }
}); 

Answer 7

With bootstrap 4 there is special class for that. Try removing the data-spy="affix" data-offset-top="90" attributes, and just add 'sticky-top'.

documentation

Answer 8

After trying every solution I could find (and being aware that affix was removed from bootstrap 4), the only way I could get the desired sticky results I needed was to use sticky-kit .

This is s really simple jQuery plugin that was easy to set-up.

Just include the code in your project and then assign the element you want to stick with

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

Answer 9

For the users who are looking for an answer in pure Javascript, this is how you can do it by using pure Javascript:

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

Answer 10

simple use class fixed-top in bootstrap 4 and use addClass and removeClass

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