6

请查看此 JPG 以供参考：

在此处输入图像描述

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

我在这里使用的代码有效，除了我不确定如何设置一个规则，一旦您向上滚动到其默认位置，就可以阻止导航粘在屏幕顶部。目前，使用下面的代码，导航保持固定在顶部，即使您向上滚动到页面顶部。

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;
}
4

2 回答 2

3

您必须声明一个额外的变量来记录#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-09T15:54:32.953 回答
0

尝试这个。您可能#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')
})
于 2013-04-09T15:48:31.640 回答