基于滚动位置显示/隐藏子标题
问题描述：
问题：我想完成以下动画：当页面在移动设备中加载时，我想显示ID为“sub-header”的div，但只要用户滚动超过50px的页面我想要隐藏子标题。页面隐藏菜单，但是当我向上滚动，它显示和隐藏多：最后，如果用户向上滚动60像素，而随时在页面上我想子头.show基于滚动位置显示/隐藏子标题
我所用下面的代码看我停止滚动后的时间。
JQuery的：
var newScroll = 0;
var subHeaderPosition = true;
var currentScroll = 0;
$(window).scroll(function() {
currentScroll = $(window).scrollTop();
if ($(window).width() < 779) {
if (currentScroll > 50 && subHeaderPosition) {
console.log("Current Scroll position: " + currentScroll);
console.log("Scroll should hide");
$("#sub-header").hide(300);
subHeaderPosition = false;
newScroll = $(window).scrollTop();
console.log("New Scroll position: " + newScroll);
} else if ((currentScroll - 60) < newScroll && !subHeaderPosition) {
console.log("Scroll position: " + currentScroll);
console.log("Scroll should show Sub-Header");
$("#sub-header").show(300);
subHeaderPosition = true;
newScroll = $(window).scrollTop();
} else {
newScroll = $(window).scrollTop();
}
}
});
UPDATE：增加了更多的日志后，我现在可以告诉大家，我的newscroll和currentscroll总是碰得指向我朝着正确的方向相同的号码。一旦我拥有了它，我会发布一个解决方案，或者如果有人知道它，我就会全神贯注。
答
你可以使用这个固定的问题
$(function(){
$(window).on('scroll', function(){
if($(window).scrollTop() >= 50){
$('header').addClass('hide');
}
else if($(window).scrollTop() <= 60){
$('header').removeClass('hide');
}
});
});
答
我想有一个与隐藏/显示时间参数的问题。正因为如此，虽然隐藏行动可以完成，但滚动实际上是异步执行的。
结帐jsfiddle。
我正在用canShowHeader变量检查此相关性。 对我来说，我运行一个假的setTimeout，但您可以使用原来的jquery hide/show case：
例子：
$("#book").show(300, function() {
canShowHeader = false;
});
和
$("#book").hide(300, function() {
canShowHeader = true;
});
希望它可以帮助...
答
我正在考虑使用addClass和removeClass，就像@НиязиГумметов所说的那样，因为你只能删除和添加一个类。
事情是这样的：
var newScroll = 0;
var subHeaderPosition = true;
var currentScroll = 0;
$(window).scroll(function() {
currentScroll = $(window).scrollTop();
if (currentScroll > 50 && subHeaderPosition) {
console.log("Current Scroll position: " + currentScroll);
console.log("Scroll should hide");
$("#sub-header").removeClass("show");
$("#sub-header").addClass("hide");
subHeaderPosition = false;
newScroll = $(window).scrollTop();
console.log("New Scroll position: " + newScroll);
} else if ((currentScroll - 60) < newScroll && !subHeaderPosition) {
console.log("Scroll position: " + currentScroll);
console.log("Scroll should show Sub-Header");
$("#sub-header").addClass("show");
subHeaderPosition = true;
newScroll = $(window).scrollTop();
} else {
newScroll = $(window).scrollTop();
}
});
#sub-header {
margin-top: 500px;
transition: all .3s;
opacity: 1;
visibility: visible;
}
.hide {
opacity: 0;
visibility: hidden;
}
.show {
opacity: 1 !important;
visibility: visible !important;
}
或者只是提取Underscore Throttle提到nicholaides。
不幸的是，我想要“标题显示，如果用户开始向上滚动不只是当他们到达页面的顶部。 – Denoteone