Fixed navigation effect on a div

Question

i found this code.

  $(document).ready(function(){ $(window).bind('scroll', function() { var navHeight = $( window ).height() - 70; if ($(window).scrollTop() > navHeight) { $('nav').addClass('fixed'); } else { $('nav').removeClass('fixed'); } }); }); 

 /* Tutorial Name: Scroll To Top Then Fixed Navigation Effect With JQuery and CSS Description: Create a sticky navigation bar that remains fixed to the top after scroll Author: Stanislav Kostadinov Author URI: http://stanislav.it Version: 1.0.0 - 11.01.2014 */ * {margin: 0; padding: 0;} a {text-decoration: none;} /* This class is added on scroll */ .fixed { position: fixed; top: 0; height: 70px; z-index: 1; } body { color: #fff; font-family: 'open-sans-bold'; font-size: 18px; text-align: center; } /* Font Face Settings */ @font-face { font-family: 'open-sans-bold'; src: url('../fonts/open-sans/OpenSans-Bold.eot'); src: url('../fonts/open-sans/OpenSans-Bold.eot?iefix') format('embedded-opentype'), url('../fonts/open-sans/OpenSans-Bold.ttf'); font-weight: normal; } /* Navigation Settings */ nav { position: absolute; bottom: 0; width: 100%; height: 70px; background: #fff; } nav li { display: inline-block; padding: 24px 10px; } nav li a { color: #757575; text-transform: uppercase; } section { height: 100vh; } /* Screens Settings */ #screen1 { background: #43b29d; } #screen1 p { padding-top: 200px; } #screen2 { background: #efc94d; } #screen3 { background: #e1793d; } @media only screen and (max-width: 520px) { nav li { padding: 24px 4px; } nav li a { font-size: 14px; } } 

 <section id="screen1"> <p>Scroll down</p> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Team</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </section> <section id="screen2"></section> <section id="screen3"></section> 

Here is a working Example. http://stanhub.com/tutorials/sticky-navigation/

Its a sticky menu and works nicely, but the problem is it only sticks then the page is scrolled all down. is it possible to fix it after the nav div is 40px scrolled down? lets say its 40 pixels between the nav box and the top browser.

Answer 1

Yes, change a variable in code from var navHeight = $( window ).height() - 70;

to var navHeight = $( window ).height() - 40;

that should fix your problem with specifying height

Answer 2

Without you posting your code this is the best I can do based on your description.

Change your Javascript like this:

$(document).ready(function(){
   $(window).bind('scroll', function() {
        var navHeight = 40; //Match the distance of your nav bar from the top of the window
        if ($(window).scrollTop() > navHeight) {
            $('nav').addClass('fixed');
        }
        else {
            $('nav').removeClass('fixed');
        }
    });
});