Jquery lepki nav podczas przewijania w górę

Question

Proszę zaznaczyć to JPG uwagę na odniesienie:

Mam pasek nawigacyjny, który pojawia się w górnej części strony. Zachowanie, którego szukam, to: Kiedy przewijasz w górę, ten sam pasek nawigacji znika i jest ustawiony na górze ekranu.

Kod, którego tu używam działa, z tym, że nie jestem pewien, jak ustawić regułę, która powstrzymuje nawigację od przyklejania się do górnej części ekranu po przewinięciu do domyślnej pozycji. Obecnie, za pomocą poniższego kodu, nawigacja pozostaje na górze, nawet po przewinięciu do góry strony.

function() { 
var previousScroll = 0; 

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

A mój CSS:

.fixed { 
    position: fixed; 
    top: 0; 
} 

Answer 1

Spróbuj tego. Może trzeba zmienić #headerwidth w zależności również od struktury

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') 
}) 

Answer 2

będzie trzeba zadeklarować dodatkową zmienną nagranie oryginalne pionowe przesunięcie elementu #header. Ponieważ wartość ta ulegnie zmianie, gdy Zdarzenie przewijania (jako stałej pozycji zresetuje offset na 0), deklarujemy go o jeden poziom wyżej w przypadku przewijania:

$(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; 
    }); 

}); 

Zobacz proof of concept skrzypce tutaj - http://jsfiddle.net/teddyrised/6zGx6/