Kind of like the affix plugin in Twitter Bootstrap, but this one automatically calculates the top offset. It creates a nice stack of elements under the fixed navbar at the top of the screen.
A Pen by Nico Haemhouts on CodePen.
Created
March 25, 2015 14:06
-
-
Save nicohaemhouts/885b81a5ac1f30a00728 to your computer and use it in GitHub Desktop.
Affix and stack elements at the top of the screen on scroll.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <nav class="navbar navbar-default navbar-fixed-top"> | |
| <div class="container"> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| <a class="navbar-brand" href="#">Affix & Stack on Scroll</a> | |
| </div> | |
| <div id="navbar" class="navbar-collapse collapse"> | |
| <ul class="nav navbar-nav"> | |
| <li class="active"><a href="#">Home</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </div><!--/.nav-collapse --> | |
| </div> | |
| </nav> | |
| <div class="container-fluid"> | |
| <div class="alert alert-info affixOnScroll"> | |
| <strong>Scroll down:</strong> | |
| Scroll down to fix this element on top just under the navbar. | |
| </div> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <div class="alert alert-info affixOnScroll"> | |
| <strong>Scroll down:</strong> | |
| Scroll down to fix this element on top just under the navbar. | |
| </div> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <div class="alert alert-info affixOnScroll"> | |
| <strong>Scroll down:</strong> | |
| Scroll down to fix this element on top just under the navbar. | |
| </div> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci culpa dicta distinctio esse est, et illum impedit in, molestias neque, nisi nostrum numquam omnis optio saepe sapiente tenetur ut vitae.</p> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function () { | |
| function affixOnScroll (fixOnScrollSelector) { | |
| var offsetTop = $('.navbar-fixed-top').outerHeight() || 0; | |
| $(window).scroll(function () { | |
| var scrollTop = $(this).scrollTop(); | |
| $(fixOnScrollSelector).trigger({ | |
| type: 'windowScrolled', | |
| scrollTop: scrollTop | |
| }); | |
| }); | |
| $(fixOnScrollSelector).on('windowScrolled', function (event) { | |
| var element = $(this), | |
| body = $(body), | |
| howFarScrolledDown = event.scrollTop + offsetTop, | |
| howFarElementIsFromTop = element.data('howFarElementIsFromTop') || element.offset().top, | |
| outOfView = howFarScrolledDown >= howFarElementIsFromTop, | |
| inView = howFarScrolledDown < (howFarElementIsFromTop + element.outerHeight()); | |
| if (element.is(':not(.fixed)') && outOfView) { | |
| element.data('howFarElementIsFromTop', element.position().top); | |
| element.css({ | |
| 'top' : offsetTop + 'px' | |
| }).addClass('fixed'); | |
| offsetTop += element.outerHeight(); | |
| body.css('padding-bottom', offsetTop); | |
| } else if (element.is('.fixed') && inView) { | |
| element.removeClass('fixed').css('top', ''); | |
| offsetTop -= element.outerHeight(); | |
| body.css('padding-bottom', offsetTop); | |
| } | |
| }); | |
| } | |
| $(document).ready(function () { | |
| affixOnScroll('.affixOnScroll'); | |
| }); | |
| }()); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| padding-top: 60px; | |
| } | |
| .affixOnScroll.fixed { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| border-radius: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment