Show Navbar based on Jquery Scrolltop

Question

Folks,

I can't seem to get this working and I'm sure it is because I'm a newbie to Jquery.

All I'm trying to do is show a hidden navbar when jquery scrolltop returns a value that is equal to the height of my header. I have the code below trying to do it. Can someone please help.

var n = $('header').height();
var y = $("body").scrollTop();

/*hide the navbar*/
$('#nav').hide();

/*below is the code that is not working*/
if(y > n) {
    $('#nav').affix({
      offset: {
         top: $('header').height()
      }
    });
    $('#nav').show();
}

Answer 1

Try this:

$(function(){
   var n = $('header').height();

   /*hide the navbar*/
   $('#nav').hide();

   $(window).scroll(function(){
     if($("body").scrollTop() > n) {
        //adjust you nav offset here.
        $('#nav').show();
     }
     else $('#nav').hide();
   });          
});

Info about query scroll can be consulted here: http://api.jquery.com/scroll/

You must eval that condition every time the scroll moves, so that your header appears or disappears accordingly.