粘性导航过早地粘在顶部答案

【问题标题】：Sticky nav sticks to the top too early粘性导航过早地粘在顶部
【发布时间】：2015-08-10 21:02:56
【问题描述】：

我的网站中有一个粘性导航栏（基于 Bootstrap），这就是 jQuery 代码：

    $(document).ready(function () {

        var flag = false;

        function stickNav() {
            $(".navbar-default").affix({
                offset: {
                    top: $('.header-img').height()
                }
            });
            $(".navbar-default").css({ "width": $('.container').width(), "z-index": 1000 });
            $(".navbar-wrapper").css("height", $('.navbar-default').height());
            $(".header").css("height", $('.header-img').height());
            flag = true;

        }

        $(".header img").ready(function () {
            if (!flag)
                window.setInterval(stickNav, 10);
        });

        $(window).resize(function () {
            $(window).off('.affix');
            $('.navbar-default').removeData('bs.affix').removeClass('affix affix-top affix-bottom');
            stickNav();
        });

和css：

.affix {
    top: 0;
    width: 100%;
}

问题是导航太早粘在顶部，这里是一个现场示例：http://nave.net23.net/Bootstrap/index.html

我的问题是如何解决它？

谢谢。

【问题讨论】：

对我来说看起来不错，只要滚动到导航接触浏览器窗口顶部的位置，导航就会粘在顶部。
这就是它当前的工作方式，一旦标题不再可见，导航就会粘在顶部。
@APAD1 谢谢，在 Firefox 中它运行良好，但在 Chrome 中它看起来像这样：screencast.com/t/Mv8Ex3AHj，为什么？
嗯，这很奇怪。我正在使用 Chrome 45，它看起来不错，并且与我在 Firefox 中的表现相同。尝试清除缓存，也许这与它有关。
我认为你们俩都是对的。我在 Chrome 中看到了 @Tal 所说的内容，然后我调整了大小，它似乎工作正常。你的调整大小事件，或者stickNav函数在开始时没有正确调用——也可能与由于ABP而没有为我加载的图像有关。 - 按照这种思路，您是否安装了阻止标题中的图像正确加载的广告拦截器？

标签： jquery css twitter-bootstrap navbar sticky

【解决方案1】：

当我加载页面并在 Chrome (44.0.2403.130 m) 中遇到问题时，我可以在控制台中发出以下两行，然后滚动似乎可以正常工作（如 Firefox 中所示）。也许只是在页面加载函数中手动调用这些：

$(window).off('.affix');
$('.navbar-default').removeData('bs.affix').removeClass('affix affix-top affix-bottom');

【讨论】：

谢谢！我想我可以从这一点上解决它。编辑：您可以请删除 GIF 示例吗？该网站是在制作之前，我不希望随机的人会看到它......
某人随机注意到它并实际将信息记入任何帐户的可能性非常小，但无论如何，我已经启动了将其删除的过程。我可以随时通知你。同时，非常感谢您的支持/正确答案！