如何在 "sticky" 导航上设置偏移量？

Question

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

我已经使用 Josh Lee's answer on this post 来使功能正常工作，但是，因为我的 header 是固定的，辅助导航会直接滚动过去，一旦它到达顶部就固定了页。

因为它完全绕过了我的 header，我如何为触发器设置一个偏移量，使其发生在距离屏幕顶部 65px 的位置？

在我的 <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>

Answer 1

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

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

Answer 2

我不知道这是否可以被视为解决我问题的 "correct" 方法，但它似乎对我有用...我将 top:-65px 添加到 [=12] =] 元素。

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

如何在 "sticky" 导航上设置偏移量？

How can I set an offset on my "sticky" navigation?

javascript

jquery

scroll

css-position

positioning