【发布时间】:2016-05-24 14:51:15
【问题描述】:
最近发现了这个页面,想为我的网站复制它的导航栏。
如您所见,当页面加载时,导航栏使用透明背景并且有填充。但是当用户向下滚动时,栏会向上滑动并粘在顶部。太棒了!
如果我没记错的话,导航栏本身使用了引导程序,但我不知道它们是如何在向下滑动时使其滑到顶部的。
有人知道如何实现吗?
谢谢 嘉臣:)
【问题讨论】:
标签: javascript css navbar nav
最近发现了这个页面,想为我的网站复制它的导航栏。
如您所见,当页面加载时,导航栏使用透明背景并且有填充。但是当用户向下滚动时,栏会向上滑动并粘在顶部。太棒了!
如果我没记错的话,导航栏本身使用了引导程序,但我不知道它们是如何在向下滑动时使其滑到顶部的。
有人知道如何实现吗?
谢谢 嘉臣:)
【问题讨论】:
标签: javascript css navbar nav
通过将位置设置为固定和顶部设置为 0px 来完成。 它继续检查导航栏的偏移量,一旦到达顶部,它就会用顶部 0px 固定。 您可以找到一个工作示例How to Bootstrap navbar static to fixed on scroll?。在哪里可以找到有效的 JSFiddle URL。
希望这可以帮助您了解它是如何完成的。
【讨论】: