How to Build Simple Sticky Navigation with Jquery

How to build simple sticky navigation with jQuery?

Try this:

Here is working jsFiddle

$(document).ready(function() {
   $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > 150) {
            $('#subnav').css({'position':'fixed','top' :'0px'});
        } else {
            $('#subnav').css({'position':'static','top':'auto'});
        }
    });
 });

Note: If you have just one value you can use else, but if you have multiple values i suggest to not use else, because it creates conflict, use else if intead.

How to build simple sticky navigation at the page bottum?

UPDATED.
Here is working jsFiddle to examine.

jQuery:

$(document).ready(function() {
    var windowH = $(window).height();
    var stickToBot = windowH - $('#menu').outerHeight(true);
    //outherHeight(true) will calculate with borders, paddings and margins.
    $('#menu').css({'top': stickToBot + 'px'});

    $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > stickToBot ) {
            $('#menu').css({'position':'fixed','top' :'0px'});
        } else {
            $('#menu').css({'position':'absolute','top': stickToBot +'px'});
        }
    });
});​

Note: if you want to go further, i suggest to inspect this answer too:

Setting CSS value limits of the window scrolling animation

Sticky NavBar onScroll?

Here is what @Matthew was talking about:

Check this fiddle http://jsfiddle.net/luckmattos/yp8HK/1/

JQUERY

var num = 200; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

Hope it helps, I used bootstrap navbar.

Make nav bar sticky

Try this script

jQuery(document).scroll(function() {
    if (jQuery(this).scrollTop() > 175) {
        jQuery('.menu-secondary-wrap').css({
           'position': 'fixed',
           'top': '0',
           'width': '950px'
        });
    } 
    else {
        jQuery('.menu-secondary-wrap').css('position','static');
    }
});

How do you create a sticky navigation when top of browser window is reached?

Here's a FIDDLE

(function($) {
  $(window).scroll(function() {
    if($(this).scrollTop() >= 130) {
       $('#menu-wrap').addClass('fixed');   
    }
    else {
       $('#menu-wrap').removeClass('fixed');   
    }
  });
})(jQuery);

---

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
#header-copyright {
  display: block;
  text-align: right;
  margin: 20px 125px 15px 0;
  font-size: 14px;
  border: none;
  color: #6e6b63;
}
#menu {
  max-width: 1080px;
  height: 38px;
  margin: /*60px*/ /*30px*/ 0 auto;
  border: 1px solid #222;
  background-color: #111;
  background-image: -moz-linear-gradient(#444, #111); 
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));    
  background-image: -webkit-linear-gradient(#444, #111);  
  background-image: -o-linear-gradient(#444, #111);
  background-image: -ms-linear-gradient(#444, #111);
  background-image: linear-gradient(#444, #111);
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
  -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
  box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
.social-icon {
  display: inline-block;
  float: right;
  margin-top: -34px;
  padding: 3px;
}

How do I create a sticky nav bar?

You could use pure css with position: sticky. To define how far from the top the value becomes sticky, modify the top property.

nav {
  position: sticky;
  top: 0;
}

Example 1

body {  padding: 0;  margin: 0;}
nav {  position: sticky;  top: 0;}
nav>ul {  margin: 0;  list-style-type: none;  padding: 0;  display: flex;  flex-direction: row;  background: red}
nav>ul>li {  padding: 10px;}

<nav>  <ul>    <li>Item</li>    <li>Item</li>    <li>Item</li>  </ul></nav><div>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p>  <p>Content</p></div>

Creating a sticky nav css and jquery

Since you only want it to become fixed when it is completely out of viewport, then slide in, just modify the top property and then animate it back into view. See this fiddle for a working example.

UPDATE

This updated fiddle should work better, as it only applies the behaviour if not already applied, and completely removes dynamic styles when returning to normal 'static' position.

Note there is still a flicker when scrolling back up - this is because the nav 'jumps' from its fixed position back to its static position. This can easily be resolved using a similar technique to the animation above.

Jquery: Using scrollTop to make animated sticky menu

I've updated your code a little bit and now it works as expected. It has the advantag that it fires everything only once if needed and not constantly. I also stored the selector in a variable to avoid a lot of re-querying.

JavaScript

var nav = $('.nav');
var scrolled = false;

$(window).scroll(function () {

    if (500 < $(window).scrollTop() && !scrolled) {
        nav.addClass('visible').animate({ top: '0px' });
        scrolled = true;
    }

   if (500 > $(window).scrollTop() && scrolled) {
        nav.removeClass('visible').css('top', '-30px');
        scrolled = false;      
    }
});

Demo

Try befory buy

---

Related Topics