创建一个粘性导航CSS和jQuery [英] Creating a sticky nav css and jquery

问题描述

我目前正在为一个网站制作一个粘性导航栏，并且遇到一些问题，当导航栏变为 position：fixed 时，它似乎跳起来了，看起来笨重，这里是我试图做的一个小提琴，

http://jsfiddle.net/DKtLR/

理想的结果是用户滚动和导航不在固定位置直到它从视口中滚动出来然后变得固定，然后滑回到视图中。

解决方案

既然你只希望它当它完全超出视口时变为固定，然后滑入，只需修改顶部属性，然后将其动画回动到视图中。查看这个小提琴作为一个工作示例。

更新

这个更新的小提琴应该更好地工作，因为它只适用于尚未应用的行为，并且在返回到正常'静态'位置时完全移除动态样式。

请注意，向后滚动时仍然有闪烁 - 这是因为nav从其固定位置跳回到静态位置。这可以使用类似于上述动画的技术轻松解决。

I am working on a sticky nav for a website currently, and I am running into a few problems, when the nav becomes position:fixed it seems to jump and it looks "clunky", here is a fiddle of what I am trying to do,

http://jsfiddle.net/DKtLR/

Ideally the outcome would be the user scrolls and the nav is not in a fixed position until it is scrolled out of the viewport it then becomes fixed and and slides back into view.

解决方案

Since you only want it to become fixed when it is completely out of viewport, then slide in, just modify the top property and then animate it back into view. See this fiddle for a working example.

UPDATE

This updated fiddle should work better, as it only applies the behaviour if not already applied, and completely removes dynamic styles when returning to normal 'static' position.

Note there is still a flicker when scrolling back up - this is because the nav 'jumps' from its fixed position back to its static position. This can easily be resolved using a similar technique to the animation above.

这篇关于创建一个粘性导航CSS和jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！