jquery - 如何使用 jquery 将元素的样式更改为滚动

Question

我想知道是否有一种方法可以在用户向下滚动时更改导航的样式 - 这是示例代码

<div id="navigation">....</div>
<div id="about">....</div>
    <div id="portfolio">....</div>
    <div id="footer">....</div>

#navigation 是绝对的，因此始终位于页面顶部。我想知道是否只有当窗口在每个部分的开头滚动时才能显示导航。

所以一开始它是可见的，当用户开始滚动时它会淡出，当#about 部分可见时#navigation 会随着向下滚动而淡入和淡出。

我尝试通过这种方式获取#about、#portfolio 和#footer 的位置:

margin_top = $("#obsticalSC").css("margin-top");

然后有一个 if 语句，如果 #navigation 的上边距等于上面的，则显示它。但是上面的代码不起作用。

谢谢

Answer 1

由于您正在使用 jQuery，这可能会有所帮助:

jQuery scrollTop

这会获取元素的位置以及它滚动了多少。

很可能，我猜你正在做一个包含动态内容的页面(显示一个或另一个)。你可以做到

$("#about").scrollTop();

要获取关于 div 中向上滚动了多少，或者您可以将其更改为:

$("body").scrollTop();

如果您正在使用页面滚动条。你可以检查它向上滚动了多少，然后做你的淡入淡出的事情。