向下滚动时隐藏菜单(但仅在50px之后)
向下滚动时隐藏菜单(但仅在50px之后)
提问于 2017-03-28 23:51:15
当您在浏览器中向下滚动时，此脚本会使导航栏消失/隐藏在标题后面。我想知道是否有可能，当你向下滚动时它就隐藏了，当用户向下滚动一定数量的像素(比如50px)时隐藏它，以避免触摸式导航隐藏在最轻微的滚动中。
提前感谢您的指点。
//导航滚动测试
var prev = 0;
var $window = $(window);
var nav = $('#belowhead');
$window.on('scroll', function(){
var scrollTop = $window.scrollTop();
nav.toggleClass('hidden', scrollTop > prev);
prev = scrollTop;
});回答 2
Stack Overflow用户
发布于 2017-03-28 23:56:10
您可以将此代码放入"window.on('scroll')“函数中：
if(scrollTop > 50) {
nav.addClass('hidden');
} else {
nav.removeClass('hidden');
}Stack Overflow用户
发布于 2019-02-02 00:43:10
2019更新/调整
下面的代码对任何想要开发标题的人都很有用，当你向下滚动时，标题就会消失。我刚刚完成了我正在创建的一个网站的以下内容，当用户开始滚动时，需要顶部标题消失，但当用户开始向上滚动时，顶部标题会重新出现；如果您要不断在网站上上下滚动，请继续应用此逻辑。
对于初学者来说，当用户滚动经过某个点(本例中为50px )时，会向我的header标记添加一个名为nav-scrolled的类。然后可以设置这个新类的样式，以更改background-color、添加box-shadow等。
$(function() {
var header = $(".nav-container");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
header.addClass("nav-scrolled");
} else {
header.removeClass("nav-scrolled");
}
})
});然而，这只解决了当用户从页面顶部滚动时无法编辑页眉样式的问题--而不是站点上的任何地方-以下修复了这个问题。
var userScroll;
var scrollTop = 0;
var delta = 5;
var navHeight = $('header').outerHeight();
$(window).scroll(function(event){
userScroll = true;
});
setInterval(function() {
if (userScroll) {
hasScrolled();
userScroll = false;
}
}, 250);对我来说，下一步是按顺序添加和删除show-nav和hide-nav类，这些类的样式已设置为显示和隐藏导航菜单。下面的代码检查用户滚动(向上或向下)到的值是否高于我的delta变量。如果用户开始在网站上向上滚动，则会添加类show-nav，并且标题会从页面顶部过渡进来。如果用户向下滚动页面，则会添加hide-nav类，并隐藏标题。
function hasScrolled() {
var st = $(this).scrollTop();
// Ensures a higher scroll than $delta
if(Math.abs(scrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > scrollTop && st > navHeight){
// Scroll Down
$('header').removeClass('show-nav').addClass('hide-nav');
$('.nav-toggle').removeClass('open');
$('.menu-left').removeClass('collapse');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('hide-nav').addClass('show-nav');
}
}
scrollTop = st;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43074248
复制相关文章
相似问题
腾讯云开发者
