javascript - 如何在滚动时折叠导航

Question

不确定这个问题是否已经得到回答。

我希望创建一个在用户滚动时折叠的导航。我想要类似于此网站的东西 http://adcglobal.org/ .滚动时导航变小。我想让我的菜单折叠成一个菜单(类似于响应式导航菜单，除了它是滚动的而不是 @media 来更改屏幕大小)。

我正在玩弄 jQuery，这就是我目前所拥有的。这样做的问题是，一旦您开始滚动，所有内容都会消失。

$(window).scroll(function(){
$("ul").hide();
});

我没有太多地使用 Javascript/jQuery 来很好地理解这个库以及可以做什么或不能做什么。

Answer 1

你会想要使用类似的东西:

$("ul").removeClass('top');
$("ul").addClass('scroll');

在您的 css 类 top 中，您将在顶部设置所有样式，而在 scroll 类中，您将拥有在您之后的所有样式滚动。

您还可能希望在用户每次滚动 $("ul").offSet().top 的值，如果为 0，则要将 top 类添加回元素，并删除 滚动。您还可以检查该值以确保在更改类之前滚动了一定数量，例如:

if ($("ul").offSet().top > 20){ ... }