Updated 2018
Most of the compressed Navbar scroll implementations for Bootstrap 3.x are done using the Affix component to change the style of the navigation bar at a particular scroll position.
However, Affix has been removed from Bootstrap 4 ..
"I dropped the Affix jQuery plugin. Instead, we recommend using the position: sticky polyfill. For more information and specific recommendations on the polyfill, see HTML5.
To create a similar Navbar effect in Bootstrap 4, you can use position: sticky (not supported in all browsers) by adding the sticky-top class to Navbar. This works to “stick” the Navbar when it reaches the top, but does not raise an event to indicate when it is “stuck”. Therefore, JS is needed to change the Navbar style when it is stuck.
One of the JS methods supported in modern browsers is IntersectionObserver . Use it to “watch” when the hidden trigger element above the navigation bar reaches the viewport (when the stuck element is applied to the html element).
.stuck .sticky-top { background-color: #222; padding-top: 3px; padding-bottom: 3px; }
Attached Navbar - IntersectionObserver Demo
You can also use a jQuery plugin like ScrollPos-Styler , or write your own jQuery to control the navigation bar styles while scrolling ...
How does it work:
Fixed-top navbar and data-toggle="affix" :
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-sm py-3" data-toggle="affix"> <a href="#" class="navbar-brand">Brand</a> <a class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</a> <ul class="nav navbar-nav"> <li class="nav-item"><a href="#" class="nav-link">..</a> </li> </ul> </div>
jQuery to view the scroll position and conditionally switch the .affix class:
var toggleAffix = function(affixElement, scrollElement, wrapper) { 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, $(this), wrapper); });
CSS to control affix style (indentation / height, color, etc.):
html,body { height:100%; padding-top:56px; } .navbar { -webkit-transition:padding 0.2s ease; -moz-transition:padding 0.2s ease; -o-transition:padding 0.2s ease; transition:padding 0.2s ease; } .affix { padding-top: 0.2em !important; padding-bottom: 0.2em !important; -webkit-transition:padding 0.2s linear; -moz-transition:padding 0.2s linear; -o-transition:padding 0.2s linear; transition:padding 0.2s linear; } section { min-height:calc(100% - 70px); }
Note. Starting with Bootstrap 4.0.0 , the navigation bar has changed a bit since navbar-toggleable-* has changed to navbar-expand-
Sticky Navbar Top - jQuery Demo
Finally, you can use the simple jQuery function $ (window) .scroll () if you know the exact position when the Navbar needs to stick ...
$(window).scroll(function() { if ($(document).scrollTop() > 100) { $('.navbar').addClass('affix'); } else { $('.navbar').removeClass('affix'); } });
https://www.codeply.com/go/62Roy6RDOa
Bootstrap 4 also changes the style of Navbar with scroll examples :
just sticky after scrolling (4.0.0)
shrink height (4.0.0)
shrink height (alpha-6)
transparent on background
change color after scrolling
change navbar bg color with scrollspy sections
Related issues:
Fix the navigation bar at the top of the scroll
Affix not working in Bootstrap 4 (alpha)