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

Question

我的网站上有一个固定的标题，高度为65px。 我有一个辅助导航，大约要向下滚动3/4页，一旦滚动到它，我想将其固定到标题的底部。

我在帖子上使用了Josh Lee的答案来使该功能正常工作，但是，因为我的标题是固定的，所以辅助导航向右滚动，并在到达页面顶部时固定。

由于它完全绕过了标题，我如何为触发器设置偏移量，使其发生在距屏幕顶部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

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

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

Answer 2

我不知道是否可以将其视为解决问题的“正确”方法，但它似乎对我top:-65px ……我在scroller-anchor元素中添加了top:-65px 。

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

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-01-15 19:40:58

解决方案2
0 2015-01-15 19:43:20

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-01-15 19:40:58

解决方案2 0 2015-01-15 19:43:20

解决方案1
1 已采纳 2015-01-15 19:40:58

解决方案2
0 2015-01-15 19:43:20