jQuery的粘性导航向上滚动

enter image description here

我有一个在页面的顶部显示一个导航栏。我正在寻找的行为是：当您向上滚动时，相同的导航栏会淡入，并固定在屏幕的顶部。

我在这里使用的代码有效，除非我不确定如何设置一个规则，即一旦您向后滚动到其默认位置时，将导航从粘贴屏幕顶部停止。目前，使用下面的代码，即使您向后滚动到页面顶部，导航仍保持固定在顶部。

function() { 
var previousScroll = 0; 

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

我的CSS是：

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

来源

2013-04-09 thejerkstore

当scrollTop为0时只是淡出？或者我在这里错过了什么 – xec 2013-04-09 15:44:05

本质上，我想调整代码，以便当用户滚动到导航的默认位置时，它将删除“固定”类。 – thejerkstore 2013-04-09 15:54:25

你真的想让它淡入吗？或者你想让它看起来像滚动查看？后面的例子检查www.bananasnballs.com – ntgCleaner 2013-04-09 16:30:10

试试这个。您可能需要改变#headerwidth也取决于你的结构

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

来源

2013-04-09 15:48:31 Ejaz

您必须声明一个额外的变量记录原始垂直#header元素的偏移量。当滚动事件触发（如固定的位置将重置偏移为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/

来源

2013-04-09 15:54:32 Terry

谢谢特里。这工作得很好。我看到的唯一问题是，当标题消失时，所有内容都会发生变化。我在想，应该删除最初的淡入淡出。 – thejerkstore 2013-04-09 17:29:14

这是因为您已将标题从文档流中取出。为了规避这种情况，你可以：（1）复制'＃header'元素（注意重复的ID ...我建议使用类代替）并且在滚动事件被触发时显示/隐藏重复，或者（2）为头元素分配一个死空间 - 例如，分配一个顶层填充，这个填充相当于父元素的头高，或者创建一个排序空间，并且确定原始头元素的位置（这样它就可以在绝对和固定之间切换定位）。 – Terry 2013-04-09 18:48:03

@thejerkstore我已经更新了小提琴 - http://jsfiddle.net/teddyrised/6zGx6/ – Terry 2013-04-09 18:57:30

jQuery的粘性导航向上滚动

回答

相关问题