Javascript 固定位置导航根据窗口高度/滚动量间歇性工作

Question

我在导航栏上方有一个标题图片，标题图片由两张图片组成，前景中的一张在左下角，并与背景一起滚动，直到它从屏幕顶部经过一段距离, 然后它溢出到导航中，最后随着它向上滚动，直到导航固定在顶部。

Fiddle

更改输出窗口的高度以查看我在下面描述的问题。

$(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 整个内容“跳回”时上。

这是 same issue as posted here - 但这没有得到解决，OP 通过不使用固定导航“解决”了它......

可能 also the same issue as asked about here , 但那也没有回答就被放弃了。

HTML 看起来像:

<div id="header">
    <div class="content">
        <img id="fg-img" src="img/fg.png" />
        <img class="banner" width="960px" height="300px" src="img/bg.jpg" />
    </div>
</div>
<div id="nav">
</div>

Answer 1

终于找到了。

问题是我让内容的主体在导航卡住后立即“跳”到导航后面。

实际上我一开始并没有注意到这种行为 - 因为我只是使用了 <br /> 的负载s 填充一些虚拟内容。

因此，当窗口大小足够大以允许向下滚动以满足 #nav 时div，略微超出，但不会大到内容超出它在 #nav 后面跳动的数量。 ，浏览器不会让它滚动到页面末尾之外，因此会“跳”回去。

我的解决方法是隐藏 #nav在一些外部#sticky-nav{ min-height: /*height of everything that sticks to top */ } .

很简单，但是很管用。 jQuery 是一样的，我们仍在检测并坚持 #nav ，但现在内容不会跳到它后面，所以当滚动量介于 0 和导航高度之间时，它不会闪烁。

Here's the fiddle .