jquery - 滚动到时将 div 更改为固定

Question

所以我看到了很多从 position:absolute 更改 div 的答案；到位置:固定；当它到达页面下方的特定点(例如 300px)时；但是，我想知道是否可以在点击实际的 div 后将其修复，而不是像 300px 这样的特定点？由于我的页面始终以 100% 高度/宽度启动，并且我的导航位于底部，因此它始终会发生变化。这是我的代码。

CSS:

nav {
    background:rgba(0,0,0,0.5);
    position:absolute;
    bottom:0;
    width:100%;
    text-align:center;
    z-index:9999;
    margin:0;
    padding:25px 0;
}

<小时/>

JavaScript:

jQuery(function($) {
    function fixDiv() {
        var $cache = $('#nav'); 
        if ($(window).scrollTop() > 300) {
            $cache.css({'position': 'fixed'});
        }
        else {
            $cache.css({'position': 'absolute'});
        }
    }
        $(window).scroll(fixDiv);
        fixDiv();
});

<小时/>

我只是希望 300 成为 #nav，这样当它到达它时，它就会粘住。

Answer 1

看看.offset()。因此，如果 $('#nav').offset().top 等于 $(window).scrollTop()，您的元素应该位于窗口的顶部.

这是一个 fiddle :http://jsfiddle.net/vj5wm0uj/1/