Question

我有一个固定的导航栏，当向下滚动页面时逐渐消失，当向上滚动页面时再次出现一切正常但我已经注意到如果我这么做很快就做了20次短动作。它没有时间去做，似乎存储了计数，然后将继续闪烁这么多次。我怎么能阻止这个？

这是我的代码：

<script type="text/javascript">
var previousScroll = 0,
headerOrgOffset = $('#centre').height();

$('header').height($('#centre').height());

$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > headerOrgOffset) {
    if (currentScroll > previousScroll) {
        $('header').fadeOut();
    } else {
        $('header').fadeIn();
    }
} else {
        $('header').fadeIn();
}
previousScroll = currentScroll;
});
</script>

<style type="css/text">
header {
width:100%;
height:86px;
background:#ffffff;
top:0;
left:0;
right:0;
position:fixed;
z-index: 1000;
display:block;
border-bottom: solid 1px #eee;
}

#centre {
width:960px;
height:86px;
margin-left:auto;
margin-right:auto;
background:#ffffff;
}
</style>

<header>
    <div id="centre">Nav</div>
</header>

Answer 1

这是一个叫做去抖的概念。基本上忽略了特定时间范围内的任何重复操作。在以下代码中，doSomething方法仅在最后一次滚动事件后500ms被调用。

function doSomething() {
   // do some really cool stuff
}

var timer;
$(window).scroll(function () {
    clearTimeout(timer);
    timer = setTimeout(doSomething, 500);
});

如何让这个固定导航停止闪烁？

1 个答案: