Affix is not working in Bootstrap 4 (alpha)

Question

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

Answer 1

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 2

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 3

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 4

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

Answer 5

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