Javascript 根据滚动方向切换移动导航
我有一个移动导航,我想根据视口滚动的方向隐藏/显示它。所以如果向下滚动我希望它隐藏,向上滚动我希望它显示 我当前的代码如下所示。它只是在滚动顶部切换。有人吗Javascript 根据滚动方向切换移动导航,javascript,jquery,Javascript,Jquery,我有一个移动导航,我想根据视口滚动的方向隐藏/显示它。所以如果向下滚动我希望它隐藏,向上滚动我希望它显示 我当前的代码如下所示。它只是在滚动顶部切换。有人吗 $(function() { $(window).on("scroll touchmove", function () { $('.mobile-nav').toggleClass('tiny', $(document).scrollTop() > 0); }); }); 也许是这样的: var me
$(function() {
$(window).on("scroll touchmove", function () {
$('.mobile-nav').toggleClass('tiny', $(document).scrollTop() > 0);
});
});
也许是这样的:
var menu_height = 80;
var menu_visible = true;
var old_scroll = $(window).scrollTop();
function checkMenu() {
new_scroll = $(window).scrollTop();
if (old_scroll < new_scroll && new_scroll > 0) {
// Scroll down
if (menu_visible == true) {
toggleMenu();
}
} else if (old_scroll > new_scroll) {
// Scroll up
if (menu_visible != true) {
toggleMenu();
}
}
old_scroll = new_scroll;
}
function toggleMenu() {
if (menu_visible == true) {
// Hide
$('#menu').animate({top: '-='+menu_height+'px'}, 200, function(){ $(this).css('display', 'none') });
menu_visible = false;
} else {
// Show
menu_visible = true;
$('#menu').css('display', 'block').animate({top: '+='+menu_height+'px'}, 200);
}
}
$(document).ready(function() {
// Show / hide menu on scroll
setInterval(checkMenu, 100);
});
代码笔:在这里找到了解决方案:谢谢!问题,我怎样才能使菜单在没有滚动的情况下也显示出来?e、 g当滚动处于空闲状态时。@user2952238如果菜单不可见,您可以在一段时间后使用setInterval切换菜单。但作为一种用户体验,我认为这不是一个好主意。我认为用户应该控制,这样他就不会了,因为菜单会在设计师认为应该控制的时候显示,而不是在用户要求时向上滚动。您可以添加滚动到顶部按钮,或显示菜单按钮。