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.

Reflate

Have you read the Bootstrap 4 docs? If you do, and this is specified in Bootstrap 4 docs, you can create an issue here – Blackjack

@jamie You mean the affix plugin is dropped? – Reflate

@jamie if affix is dropped how we can do things like as affix do? – Reflate

See @vucko's answer. I haven't even checked the docs or used Bootstrap 4... just to remind you of a way. See Vucko's answer for further details. – Blackjack

LoL i just lost an whole hour when try to figure out why affix is not working... It seems that page I get to work on used boostrap v4 and not v3... From now I will always check if page is using "standard" versions, not some "latest new futures" :) – Trillion

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

Bluebottle

I assume $('.navbar').addClass('navbar'); is supposed to be $('.navbar').addClass('fixed-top');? I don't see how adding a class that it already has would do anything, otherwise. – Henrie

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

Bramble

This worked perfectly, thank you. It also works with scrollspy. – Tolbutamide

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.

Gaspar

important: position: sticky does not work in chrome yet cause it's only has been 4 years since it was introduced... – Lenzi

@Lenzi Only... :-P FYI it used to work in Chrome until they broke it. – Women

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.

Taranto

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
}

Shopping

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

Guerra

Add some explanation for your answer – Faker

exp Bootstrap 3, attr data-spy="affix" and data-offset-top="number". – Guerra

Answer 7

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

Reflate

Answer 8

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

Failing

I was having the issue 3 years ago. But thanks for your answer. It will help someone else. – Reflate

Answer 9

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

Proscribe

The point is that I couldn't get the suggested 8 lines to work. I'm not exactly a noob with JS or CSS either. Besides, 8 lines would be a minimum, there are other factors to take into consideration such as different types of scroll event. – Proscribe

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

Trilemma

Duplicate of https://mcmap.net/q/67842/-affix-is-not-working-in-bootstrap-4-alpha, The same answer is posted. – Reflate