如何在“粘性”导航上设置偏移量？答案

【问题标题】：How can I set an offset on my "sticky" navigation?如何在“粘性”导航上设置偏移量？
【发布时间】：2015-03-14 06:08:56
【问题描述】：

我的网站上有一个固定的标题，高度为 65 像素。我在页面下方大约 3/4 处有一个辅助导航，一旦滚动到该页面，我想将其固定到标题的底部。

我已经使用Josh Lee's answer on this post 来使功能正常工作，但是，因为我的标题是固定的，所以辅助导航会滚动到它旁边，一旦它到达页面顶部就会固定。

既然它完全绕过了我的标题，我该如何设置触发器的偏移量，使其发生在距屏幕顶部 65 像素的位置？

在我的<head>：

<script>
function moveScroller() {
    var move = function() {
        var st = $(window).scrollTop();
        var ot = $("#scroller-anchor").offset().top;
        var s = $("#mydiv");
        if(st > ot) {
            s.css({
                position: "fixed",
                top: "65px"
            });
        } else {
            if(st <= ot) {
                s.css({
                    position: "relative",
                    top: ""
                });
            }
        }
    };
    $(window).scroll(move);
    move();
}
</script>

在我的页面上：

<div id="scroller-anchor"></div>
<div id="mydiv" class="">
    <ul class="wrap">
        <li> ... </li>
        <li> ... </li>
        <li> ... </li>
        <li> ... </li>
    </ul>
</div>
<script type="text/javascript"> 
  $(function() {
    moveScroller();
  });
</script>

【问题讨论】：

标签： javascript jquery scroll css-position positioning

【解决方案1】：

我不知道这是否可以被认为是解决我的问题的“正确”方法，但它似乎对我有用......我将top:-65px 添加到scroller-anchor 元素。

<div id="scroller-anchor" style="top: -65px;"></div>

【讨论】：

这实际上是把你的滚动锚点带到页面上 65px，通过将 -65 添加到 ot 变量，脚本只是希望更快地改变位置 65px。

【解决方案2】：

我相信您在检查何时将位置更改为固定时需要考虑空间，例如将 ot 变量更改为

var ot = $("#scroller-anchor").offset().top - 65;

【讨论】：

我们同时发表了评论：D - 我假设这与我的回答完全相同。试过了，它有效。谢谢！