Question

我正在尝试找到一个位于页面中间的导航栏，以便在滚动到浏览器的顶部时“停靠”，并在浏览器向上滚动时将其取消停靠。这是我的代码http://jsfiddle.net/gLQtx/

  $(function() {
     var initPos = $('#stickyNav').offset().top;
     console.log(initPos);
    $(window).bind('scroll',function() {
        var vPos = $(window).scrollTop(); 
         if( vPos > initPos ) {
          $('#stickyNav').css('position', 'fixed'); 
          $('#stickyNav').css('top', '0');
        } else {
          $('#stickyNav').css('position', 'absolute'); 
          $('#stickyNav').css('top', '0'); 


        }
    });
    });

Answer 1

我忽略了你对脱离的问题。

见updated fiddle。 （更新：有一个even newer one here。）

它包含对HTML和CSS的更改。基本上我在stickynav周围添加了一个容器，因此jquery可以根据容器计算，然后将stickynav定位到固定位置。这样，当stickynav位置固定时，容器仍然有一个偏移量。

<强> HTML

<body>
    <div class="container">
        <div id="stickyNav_container">
            <div id="stickyNav">
                <ul>
                    <li>Menu Item</li>
                    <li>Menu Item</li>
                    <li>Menu Item</li>
                    <li>Menu Item</li>
                </ul>
            </div>
        </div>
    </div>
</body>

<强> CSS

body {
    margin:auto;
}
.container {
    width:100%;
    height:1000px;
    position:relative;
    background:black;
}
#stickyNav_container {
    position: absolute;
    margin: 0 auto;
    top: 300px;
}
#stickyNav_container, #stickyNav {
    background:white;
    height: 60px;
    width: 300px;
}
#stickyNav ul {
    float:left;
}

<强> JS

$(document).ready(function () {
    $(window).bind('scroll', function () {
        var vPos = $(window).scrollTop();
        var totalH = $('#stickyNav_container').offset().top;
        var finalSize = totalH - vPos;

        console.log(finalSize);

        if (finalSize <= 0) {
            $('#stickyNav').css({
                'position': 'fixed',
                    'top': 0
            })
        } else {
            $('#stickyNav').css({
                'position': 'static'
            })
        }
    });
});

老答案：

查看这个更新的jsfiddle。

http://jsfiddle.net/gLQtx/4/

然而，请注意，在它击中导航一次之后，位置固定在顶部，然后该元素的偏移将始终为0或更小。所以导航将永远不会“返回”到你原来的位置。

$(document).ready(function () {
    $(window).bind('scroll', function () {
        var vPos = $(window).scrollTop();
        var totalH = $('#stickyNav').offset().top;
        var finalSize = totalH - vPos;

        console.log(finalSize);

        if (finalSize <= 0) {
            $('#stickyNav').css({
                'position': 'fixed',
                    'top': 0
            })
        } else {
            $('#stickyNav').css({
                'position': 'absolute'
            })
        }
    });
});

在滚动时将固定导航栏停靠在顶部

1 个答案: