Javascript固定位置导航根据窗口高度/滚动量间歇性地工作
我在导航栏上方有一个标题图像，标题图像由两个图像组成，前景中的一个位于左下角，然后滚动显示背景，直到它从屏幕顶部通过一段距离，然后它溢出到导航中，最后用它向上滚动，直到导航修复到顶部。
小提琴
更改输出窗口的高度以查看我在下面描述的问题。
$(function () { var nav_offset_top = $('#nav').offset().top; var nav = function () { var scroll_top = $(window).scrollTop(); var width = $(window).width(); if (scroll_top < 195) { $('#fg-img').css({ 'position': 'absolute', 'top': 0 }); $('#nav').css({ 'position': 'relative' }); } else if (scroll_top < 265) { $('#fg-img').css({ 'position': 'fixed', 'top': -195}); $('#nav').css({ 'position': 'relative' }); } else if (scroll_top < nav_offset_top) { $('#fg-img').css({ 'position': 'fixed', 'top': 70-scroll_top }); $('#nav').css({ 'position': 'relative' }); } else { $('#nav').css({ 'position': 'fixed', 'top': 0 }); $('#fg-img').css({ 'position': 'fixed', 'top': -247 }); } }; nav(); $(window).scroll(function () { nav(); }); }); 这完全符合我的意图，如果说Chrome窗口是我屏幕垂直高度的一半 – 所以我最初认为它工作得很好。
然后我意识到，如果向下滚动“没有太多”， scroll_top == nav_offset_top了 – 当scroll_top == nav_offset_top ，整个事情’跳回’。
这与此处发布的问题相同 – 但是这个问题没有解决，OP通过不使用固定导航解决了这个问题……
可能也与此处提出的问题相同 ，但是如果没有回答也被抛弃了。
HTML看起来像：
最后，我发现了它。
问题在于，我很快就让主体内容在导航后面跳了起来。
我实际上一开始并没有注意到这种行为 – 因为我只是使用了大量的内容来填充一些虚拟内容。
因此，当窗口大小足以允许向下滚动以满足#nav div时，稍微超出，但不会大到超出它跳到#nav后面的量的内容，浏览器就不会让它滚动超出页面的末尾，从而“跳回”。
我的修复方法是在一些外部的#sticky-nav{ min-height: /*height of everything that sticks to top */ } #nav #sticky-nav{ min-height: /*height of everything that sticks to top */ } #nav 。
简单，但它的工作原理。 jQuery是一样的，我们仍然会检测并粘贴#nav ，但现在内容不会跳到它后面，因此当0和导航高度之间有一定量的滚动时它不会闪烁。
这是小提琴 。
else{ $('#fg-img').css({ 'position': 'fixed', 'top': -247}); }
在某一方面的变化
else if (scroll_top < ('you condition') ){ $('#fg-img').css({ 'position': 'fixed', 'top': -247}); }
解
试图尽可能干燥元素以获得干净的解决方案。 请注意，如果从图像中删除块显示，则必须设置行高，否则最终可能会在元素之间留出空格。
HTML
- item
- item
...
CSS
body {margin: 0} img {display: block} ol {margin: 10px; padding: 0 0 0 20px}
JS
var $nav = $('#nav'), $header = $('#header'), $window = $(window), height = $nav.height(), top = $nav.offset().top, nav = function () { var scroll = $window.scrollTop(); if (top < scroll) { $nav.css({ 'position': 'fixed', 'top': 0}); $header.css({ 'margin-bottom': height + 10 }); //10 is the bottom margin of the next element } else { $nav.css({ 'position': 'relative' }); $header.css({ 'margin-bottom': 0 }); } }; nav(); $window.scroll(nav);