Affix is not working in Bootstrap 4 (alpha)

Question

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

Answer 1

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 2

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 3

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 4

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();