Javascript 标题未完全隐藏时，粘性菜单快速跳转到顶部或滚动到顶部

我正在尝试使用jquery创建一个粘性导航。当标题尚未完全隐藏或滚动到顶部时，我的导航快速跳转到顶部。我希望标题完全滚动到顶部，然后导航杆才能固定到它的位置

问题：在标题流在滚动后完全隐藏到顶部之后，如何使导航保持在其位置

这是我的JSFIDLE链接示例

这是我的密码

<style type="text/css">
    .clearer {
        clear: both;
        margin: 0;
        padding: 0;
    }
    .header {
        width: 84%;
            margin: 0 auto;
    }
    .dummy-content {
        width: 10%;
        margin: auto;
    }
    .fixed {
        position: fixed;
        top: 0;
    }
    .nav-placeholder {
        width: 84%; 
        margin: 0 auto;
        background: transparent;
        height: auto;
    }
    nav {
        width: 84%;
        background: red;
        }
        nav ul li {
            list-style: none;
            float: left;
            padding: 10px;
            text-align: center;
            }
            nav ul li:hover {
                cursor: pointer;
                background: white;
            }
</style>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var navOffset = $("nav").offset().left;

        $("nav").wrap('<div class="nav-placeholder"></div>');
        $(".nav-placeholder").height($('nav').outerHeight());

        $(window).scroll(function() {
            var scrollPos = $(window).scrollTop();
            $(".value").html(scrollPos);
            if (scrollPos >= navOffset) {
                $("nav").addClass("fixed");
            } else {
                $("nav").removeClass("fixed");
            }
        });
    });
</script>
<div class="header">
    <p>this is header</p>
    <p>this is header</p>
    <p>this is header</p>
    <p>this is header</p>
    <p>this is header</p>
</div>
<nav>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
    </ul>
    <div class="clearer"></div>
</nav>
<div class="value"></div>
<div class="dummy-content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>

.更清楚{
明确：两者皆有；
保证金：0；
填充：0；
}
.标题{
宽度：84%；
保证金：0自动；
}
.虚拟内容{
宽度：10%；
保证金：自动；
}
.固定{
位置：固定；
排名：0；
}
.导航占位符{
宽度：84%；
保证金：0自动；
背景：透明；
高度：自动；
}
导航{
宽度：84%；
背景：红色；
}
李国荣{
列表样式：无；
浮动：左；
填充：10px；
文本对齐：居中；
}
nav ul li:悬停{
光标：指针；
背景：白色；
}
$（文档）.ready（函数（）{
var navOffset=$（“nav”）.offset（）.left；
美元（“nav”）。换行符（“”）；
$（“.nav占位符”）.height（$（'nav'）.outerHeight（））；
$（窗口）。滚动（函数（）{
var scrollPos=$（window.scrollTop（）；
$（“.value”）.html（scrollPos）；
如果（滚动位置>=导航偏移）{
美元（“nav”）.addClass（“固定”）；
}否则{
$（“nav”）.removeClass（“固定”）；
}
});
});
这是标题

这是标题

这是标题

这是标题

这是标题


一个
两个
三
四

Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子。Donec pede justo、fringilla vel、aliquet nec、vulputate eget、arcu。在埃尼姆·胡斯托、朗卡斯·乌特、伊佩拉、维尼那提斯·维塔、胡斯托。猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。万岁。埃尼安·沃普塔特·埃利芬德·泰勒斯。埃尼安·利古拉、波特提托·欧盟、康塞卡特·维泰、埃利芬德·ac、埃尼姆。阿利奎姆·勒姆·安特、达比布斯·安特、维韦拉·奎斯、费吉亚·阿泰勒斯。长生不老不老。奎斯克·鲁特罗姆。埃涅亚饮食。奥古斯一世。乌兰科乌尔里西斯库拉比图尔酒店。南乙对。艾蒂安·朗库斯。时间之美，调味品之美，自由之美，平等之美。Nam quam nunc，blandit vel，luctus pulvinar，hendrerit id，lorem。这是一个非常重要的时刻。不要为威尼斯人的自由而浪费生命。纳拉姆·奎斯·安特。我坐在那里，或者我坐在那里。杜伊斯·利奥。塞德·弗林斯·莫里斯坐在阿梅特·尼布旁边。大矢状背根。塞德·康塞卡特、利奥·埃吉特·比本杜姆·索达莱斯、奥古斯·维利特·库苏斯·努克、

---

谢谢

使用以下方法获得左偏移：

var navOffset = $("nav").offset().left;

我认为您需要顶部的值：

var navOffset = $("nav").offset().top;

---

更新的Fiddle:

如果需要，可以隐藏标头，然后在回调函数中添加固定类或删除它，如下所示

$(document).ready(function() {
        var navOffset = $("nav").offset().left;

        $("nav").wrap('<div class="nav-placeholder"></div>');
        $(".nav-placeholder").height($('nav').outerHeight());

        $(window).scroll(function() {
            var scrollPos = $(window).scrollTop();
            $(".value").html(scrollPos);
            if (scrollPos >= navOffset) {

                $('.header').slideUp(500,function(){
                    $("nav").addClass("fixed");
                });

            } else {
                $('.header').slideDown(500,function(){
                    $("nav").removeClass("fixed");
                });
            }
        });
    });

$（文档）.ready（函数（）{
var navOffset=$（“nav”）.offset（）.left；
美元（“nav”）。换行符（“”）；
$（“.nav占位符”）.height（$（'nav'）.outerHeight（））；
$（窗口）。滚动（函数（）{
var scrollPos=$（window.scrollTop（）；
$（“.value”）.html（scrollPos）；
如果（滚动位置>=导航偏移）{
$（'.header'）.slideUp（500，函数（）{
美元（“nav”）.addClass（“固定”）；
});
}否则{
$（'.header'）。向下滑动（500，函数（）{
$（“nav”）.removeClass（“固定”）；
});
}
});
});

---

希望有帮助

谢谢，我忘了将偏移量更改为.top，工作正常。欢迎您。别忘了把答案标为正确；）谢谢这是一个很好的选择，效果也很好。通过将偏移量从.left更改为.top解决了此问题。