在页面滚动中显示/隐藏导航菜单的偏移量
尝试在页面滚动位置100 to上设置偏移以显示/隐藏导航菜单。它在一个鼠标滚动中显示/隐藏导航，我已经将lastScroll = 0设置为lastScroll = 100，但无法工作。
Jquery: 小提琴
// Script
lastScroll = 0;
$(window).on('scroll',function() {
var scroll = $(window).scrollTop();
if(scroll === 0){
$(".nav").removeClass("darkHeader");
} else if(lastScroll - scroll > 0) {
$(".nav").addClass("darkHeader");
} else {
$(".nav").removeClass("darkHeader");
}
lastScroll = scroll;
});HTML：
<div class="nav">
Sticky top navigation bar
</div>
<div class="wrap">
<h3>Some filler text</h3>
Bacon ipsum dolor sit amet mollit ball tip occaecat brisket cupidatat meatball capicola. Capicola rump turducken, elit shankle cupidatat pastrami duis fatback. Sint occaecat kielbasa labore pastrami corned beef. Sunt swine bacon, fugiat dolor aute anim jerky nostrud et venison shankle consectetur boudin landjaeger.
Pork chop sed turkey aute, duis corned beef pariatur short loin proident culpa. Capicola filet mignon fugiat corned beef shank ea, commodo doner adipisicing eu salami. Doner laboris pariatur beef ribs non id. Andouille eu meatball consectetur ham hock. Ea dolore cillum cow pork loin aliquip leberkas id est corned beef dolore t-bone. In salami jerky cupidatat et.
</div>因此，如何在鼠标滚动位置100 to显示/隐藏导航。例如小提琴。
我的意思是，只有当你向上滚动页面时，它才会显示导航菜单，并以正确的方式出现。但我要显示后滚动页100 up，意味着不显示正确的方式，要显示和隐藏后100 up滚动向上页。
提前谢谢。
回答 3
Stack Overflow用户
发布于 2015-08-16 13:55:59
这就是你要的。顺便说一句，medium.com做得很好。他们甚至写了一篇关于他们是如何做到的文章。您可能需要检查一下，以防您真的想改进您的解决方案：
https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c
var lastScroll = 0;
var scrollUpStart = 0;
$(window).on('scroll',function() {
var scroll = $(window).scrollTop();
if(scroll === 0){
// we are at the top
$(".nav").removeClass("darkHeader");
} else if(lastScroll > scroll) {
// we are scrolling up
// we check if we have started scrolling up already
if (scrollUpStart < scroll) {
// if we just started scrolling up, we set
// the scrollUpStart to the current scroll value
scrollUpStart = scroll;
}
// if we continue scrolling up, the difference between
// scrollUpStart and scroll will eventually reach a 100px
if (scrollUpStart - scroll > 100) {
$(".nav").addClass("darkHeader");
}
} else {
// we are scrolling down
// reset scrollUpStart
scrollUpStart = 0;
$(".nav").removeClass("darkHeader");
}
lastScroll = scroll;
});Stack Overflow用户
发布于 2015-08-16 13:41:52
此JS应起作用:)
Javascript
$(window).on('scroll',function() {
var scroll = $(window).scrollTop();
if(scroll >= 100){
$('.nav').fadeOut();
} else {
if(!$('.nav').is(":visible")){
$('.nav').fadeIn();
}
}
});http://jsfiddle.net/9fbr320y/16/
Stack Overflow用户
发布于 2015-08-16 13:44:24
$(window).scrollTop()从顶部返回滚动量(以像素为单位)，因此只需编写：
$(window).on('scroll',function() {
console.log($(window).scrollTop());
var scroll = $(window).scrollTop();
if(scroll > 100){
$(".nav").addClass("darkHeader");
} else {
$(".nav").removeClass("darkHeader");
}
});https://stackoverflow.com/questions/32035605
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号