• Skip to main content
  • What We Do
  • Our Work
  • Contact

Mackey

August 24, 2012 by Mackey

Sticky Navigation or Div

I found a pretty simple script from www.backslash.gr that essentially keeps the navigation or any div for that matter at the top of the page when scrolling.

Here is the JS:

[cc lang=”js”]

$(function() {

// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $(‘#sticky_navigation’).offset().top;

// our function that decides weather the navigation bar should have “fixed” css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top

// if we’ve scrolled more than the navigation, change its position to fixed to stick to top,
// otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$(‘#sticky_navigation’).css({ ‘position’: ‘fixed’, ‘top’:0, ‘left’:0 });
} else {
$(‘#sticky_navigation’).css({ ‘position’: ‘relative’ });
}
};

// run our function on load
sticky_navigation();

// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});

});
[/cc]

To see the full article go to https://www.backslash.gr/content/blog/webdevelopment/6-navigation-menu-that-stays-on-top-with-jquery

Filed Under: Code Snippets

Mackey Creative Lab
Web Design and Development, Branding, Graphic Design and Marketing Strategy
680 East Colorado Blvd., Suite 180 & Second Floor, Pasadena, CA 91101
info@mackeycreativelab.com // 626 214 5093
© 2014-2021 Mackey, LLC, All Rights Reserved

Want to join the Lab? Become a lab partner

Need Wordpress Performance & Security Management? Learn More