0

I'm trying to get a nav bar that is positioned in the middle of a page to "dock" with the top of the browser when it is scrolled to, and undock when the browser is scrolled back up past it. Here is my code 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'); 


        }
    });
    });
4

1 回答 1

2

我忽略了你问的关于取消对接的问题。

看到这个更新的小提琴。（更新：这里有一个更新的。）

它包括对 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'
            })
        }
    });
});
于 2013-05-02T03:58:06.967 回答