基于滚动位置显示/隐藏子标题

问题：我想完成以下动画：当页面在移动设备中加载时，我想显示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总是碰得指向我朝着正确的方向相同的号码。一旦我拥有了它，我会发布一个解决方案，或者如果有人知道它，我就会全神贯注。

来源

2016-11-28 Denoteone

你可以使用这个固定的问题

$(function(){ 

$(window).on('scroll', function(){ 

    if($(window).scrollTop() >= 50){ 
    $('header').addClass('hide'); 
} 
else if($(window).scrollTop() <= 60){ 
    $('header').removeClass('hide'); 
} 

}); 

});

https://jsfiddle.net/qummetov_/3hf1e350/

来源

2016-11-28 19:44:49

不幸的是，我想要“标题显示，如果用户开始向上滚动不只是当他们到达页面的顶部。 – Denoteone

我想有一个与隐藏/显示时间参数的问题。正因为如此，虽然隐藏行动可以完成，但滚动实际上是异步执行的。

结帐jsfiddle。

我正在用canShowHeader变量检查此相关性。对我来说，我运行一个假的setTimeout，但您可以使用原来的jquery hide/show case：

例子：

$("#book").show(300, function() { 
    canShowHeader = false; 
});

和

$("#book").hide(300, function() { 
    canShowHeader = true; 
});

希望它可以帮助...

来源

2016-11-28 19:55:27

我正在考虑使用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。

来源

2016-11-28 20:57:11

基于滚动位置显示/隐藏子标题

回答

相关问题