Geek asks and answers

JQuery sticky nav only when scrolling up

Please check this jpg output for reference:

enter image description here

I have a navigation bar that appears at the top of the page. The behavior I'm looking for is this: When you scroll up, the same navigation bar disappears and locks to the top of the screen.

The code I use works, except that I'm not sure how to set a rule that stops navigation at the top of the screen after scrolling to the default position. Currently, with the code below, the navigator remains fixed at the top, even if you scroll back to the top of the page.

function () {
var previousScroll = 0;

$(window).scroll(function(){
   var currentScroll = $(this).scrollTop();
   if (currentScroll > previousScroll){
        $('#header').fadeOut();
   } else {
        $('#header').fadeIn();
        $('#header').addClass('fixed');
   }
   previousScroll = currentScroll;
});

And my CSS:

.fixed {
    position: fixed;
    top: 0;
}
+5
source share
2 answers

, #header. ( reset 0), :

$(document).ready(function() {
    var previousScroll = 0,
        headerOrgOffset = $('#header').offset().top;

    $(window).scroll(function() {
        var currentScroll = $(this).scrollTop();
        if(currentScroll > headerOrgOffset) {
            if (currentScroll > previousScroll) {
                $('#header').fadeOut();
            } else {
                $('#header').fadeIn();
                $('#header').addClass('fixed');
            }
        } else {
             $('#header').removeClass('fixed');   
        }
        previousScroll = currentScroll;
    });

});

- http://jsfiddle.net/teddyrised/6zGx6/

+3

. , #header width

var hdr = $('#header'); 

var off = {top: 150} //hdr.offset();

$(window).scroll(function(){
    if($(this).scrollTop() >= off.top)
        hdr.fadeIn('fast').css({position :'fixed', top: 0, left: 0});
    else
        hdr.fadeOut('fast')
})
0

More articles:


All Articles