Affix is not working in Bootstrap 4 (alpha)

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

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