向下滚动菜单时将菜单拆分并固定到顶部

Question

首次访问该页面时的博客。 （实际屏幕截图）

当用户向下滚动时会发生什么（实际屏幕截图;此刻没有特别的事情发生）

这就是我想要发生的事情（编辑屏幕截图）。

有人请指出我正确的方向可能是一个教程/让我知道这个'技术'的术语叫什么。我确信可以在jQuery / CSS中执行此操作，但我不确定我需要搜索什么。

我正在运行Wordpress， Michael Norris 是标题文本，菜单是由Wordpress菜单编辑器创建的导航菜单。

是否有插件可以执行此操作？

提前致谢。

Answer 1

1. 您需要检测滚动事件，可以使用jQuery
中的.scroll()来完成
2. 一旦他们开始滚动，您必须将位置更改为元素块的 FIXED 。为此，您可以使用.css()

我认为你喜欢这个，如果没有尝试将它包装在div

中

<div class=wrapper></div>
<h1>Michael Norris</h1>
<ul>
 <li>Home</li>
 ....
 ....
</ul>
</div>

希望你理解我的逻辑。