如何折叠滚动导航

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添加回元素，然后删除scroll。您还可以检查该值以确保在更改类之前滚动某个量，例如：

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