Affix not working in Bootstrap 4 (alpha)

Question

According to the Bootstrap 3 docs, I added the following attributes to the navigation bar:

<nav class="navbar no-margin-bottom" data-spy="affix" data-offset-top="90" > ... </nav> 

After scrolling the page, Bootstrap 4 does not add a class to navbar, which is an affix. Can someone tell me how to solve this problem? Bootstrap.js and jQuery.js work.

Answer 1

Although the affix is ​​removed from Bootstrap in version 4. However, you can achieve your goal with this jQuery code:

 $(window).on('scroll', function(event) { var scrollValue = $(window).scrollTop(); if (scrollValue == settings.scrollTopPx || scrollValue > 70) { $('.navbar').addClass('fixed-top'); } }); 

Answer 2

From the bootstrap v4 documentation:

Discarded the Affix jQuery plugin. Instead, use position: sticky polyfill. See HTML5 Please enter for more details and specific recommendations for polyfill.

If you used Affix to apply additional position styles, poly regiments may not support your use case. One option for this use is the third-party ScrollPos-Styler library.

Answer 3

Bootstrap 4 Update

It’s recommended that you use sticky polyfill in the documents, and the recommended ScrollPos-Styler doesn’t really help with the scroll position (you can easily determine the offset).

I think it is easier to use jQuery to view the window scroll and change CSS to fixed accordingly ...

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

Affix Bootstrap 4 (sticky navigation bar)

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: NavBar animation / compression when scrolling using Bootstrap 4

Answer 4

To build Anwar Hussein’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 navbar when scrolling down, but will also remove the class when scrolling back. Previously, when scrolling back, the application class would remain applied to the navigation bar.

Answer 5

According to the Vucko quote in the Mirgation docs, I really liked the ScrollPos-Styler library.

• Include the .js ScrollPos-Styler file ( scrollPosStyler.js ) in your page.
• Find the appropriate <div> that you want 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 the .css styles that you want to activate after the element has become sticky (according to 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 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'); } }); 

Answer 7

After every solution that I could find (and knowing that the affix was removed from bootstrap 4), the only way to get the desired sticky results that I need is to use sticky-kit .

This is a very simple jQuery plugin that is easy to configure.

Just include the code in your project and then assign the element you want to stick to,

 $("#sidebar").stick_in_parent(); 

Answer 8

For users looking for an answer in pure Javascript, here is how you can do it 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 9

just use a fixed vertex class 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'); } });