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.

Have you read the Bootstrap 4 docs? If you do, and this is specified in Bootstrap 4 docs, you can create an issue [here](https://github.com/twbs/bootstrap/tree/v4-dev) — Jamie, Apr 01 '16 at 07:02
@jamie if affix is dropped how we can do things like as affix do? — Ilyas karim, Apr 01 '16 at 07:08
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.* — Jamie, Apr 01 '16 at 07:08
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" :) — b4rtekb, Jun 15 '17 at 17:15

score 20 · Accepted Answer · edited Jul 14 '18 at 05:43

20

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

edited Jul 14 '18 at 05:43

Doom Guy

25
7

answered May 14 '16 at 10:41

Anwar Hussain

216
1
5

4

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. – Tieson T. Apr 18 '17 at 06:03

Carol Skelly · Answer 2 · 2018-04-28T12:15:04.677

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

This worked perfectly, thank you. It also works with scrollspy. — jcwhall, Dec 28 '18 at 12:07

score 13 · Answer 3 · answered Apr 01 '16 at 07:04

13

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.

answered Apr 01 '16 at 07:04

Vucko

20,555
10
56
107

14

important: `position: sticky` does not work in chrome yet cause it's only has been 4 years since it was introduced... – clankill3r Apr 28 '16 at 09:44
1

@clankill3r Only... :-P FYI it used to work in Chrome until they broke it. – TylerH May 19 '16 at 15:06

score 4 · Answer 4 · answered Sep 19 '17 at 01:47

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.

score 2 · Answer 5 · answered Feb 13 '17 at 23:18

As per Vucko's quote within the Mirgation docs, ScrollPos-Styler library suited me quite well.

Include the .js ScrollPos-Styler (scrollPosStyler.js) file to your page.
Find the relevant <div> you wish to make 'sticky'

<nav class="navbar navbar-toggleable-md">

Apply sps sps--abv class

<nav class="navbar navbar-toggleable-md sps sps--abv">

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
}

score 1 · Answer 6 · answered Nov 24 '17 at 08:59

1

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

answered Nov 24 '17 at 08:59

TranDuc

23
1
10

Add some explanation for your answer – Anandhu Nadesh Nov 24 '17 at 09:08
exp Bootstrap 3, attr data-spy="affix" and data-offset-top="number". – TranDuc Nov 25 '17 at 07:59

Ilyas karim · Answer 7 · 2019-02-20T08:51:43.650

1

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

edited Feb 20 '19 at 08:51

answered Jan 06 '18 at 11:43

Ilyas karim

4,592
4
33
47

score 1 · Answer 8 · answered Nov 06 '19 at 13:35

1

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

answered Nov 06 '19 at 13:35

d.popov

4,175
1
36
47

1

I was having the issue 3 years ago. But thanks for your answer. It will help someone else. – Ilyas karim Nov 06 '19 at 14:16

score 0 · Answer 9 · answered Dec 08 '17 at 17:51

0

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

answered Dec 08 '17 at 17:51

DazBaldwin

4,125
3
39
43

1

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. – DazBaldwin Jan 24 '18 at 15:43

score 0 · Answer 10 · answered Jul 05 '19 at 11:33

0

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

answered Jul 05 '19 at 11:33

Vahid Alvandi

588
9
17

Duplicate of https://stackoverflow.com/a/47469634/5247564, The same answer is posted. – Ilyas karim Jul 05 '19 at 12:57

Affix is not working in Bootstrap 4 (alpha)

10 Answers10

Linked

Related