Affix is not working in 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.