CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapaffixbootstrap-4
Ilyas karim
Ilyas karim

Reputation: 4812

Affix is not working in Bootstrap 4 (alpha)

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.

Upvotes: 14

Views: 35986

Answers (10)

d.popov
d.popov

Reputation: 4255

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

Upvotes: 1

Vahid Alvandi
Vahid Alvandi

Reputation: 612

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

Upvotes: 0

Ilyas karim
Ilyas karim

Reputation: 4812

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

Upvotes: 1

Anwar Hussain
Anwar Hussain

Reputation: 216

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

Upvotes: 20

Carol Skelly
Carol Skelly

Reputation: 362300

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

Upvotes: 15

DazBaldwin
DazBaldwin

Reputation: 4305

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

Upvotes: 0

TranDuc
TranDuc

Reputation: 23

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

Upvotes: 1

Kyle Higginson
Kyle Higginson

Reputation: 942

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.

Upvotes: 4

MackieeE
MackieeE

Reputation: 11862

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">

  1. Apply sps sps--abv class

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

  1. 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
}

Upvotes: 2

Vucko
Vucko

Reputation: 20834

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.

Upvotes: 13

Related Questions