滚动页面时将Div固定在顶部

Question

目前，我能够在滚动下320px后将 div 置顶，但我想知道是否有其他方法可以实现。下面是我的代码：

jQuery(function($) {
    function fixDiv() {
        if ($(window).scrollTop() > 320) { 
            $('#navwrap').css({ 'position': 'fixed', 'top': '0', 'width': '100%' }); 
        }
        else {
            $('#navwrap').css({ 'position': 'static', 'top': 'auto', 'width': '100%' });
        }
    }
    $(window).scroll(fixDiv);
    fix5iv();
});

它能正常工作，但上面的一些 divs 高度不总是相同的，所以我不能依赖于 320px。我该如何在不使用 if ($(window).scrollTop() > 320) 的情况下让其正常工作，以便用户在滚过 div #navwrap 后在顶部淡入？

- Joe Bobby

Answer 1

尝试使用#navwrap元素的 offset().top。这样，该元素将从文档中它的起始位置固定，无论其位置在哪里。例如:

function fixDiv() {
    var $div = $("#navwrap");
    if ($(window).scrollTop() > $div.data("top")) { 
        $div.css({'position': 'fixed', 'top': '0', 'width': '100%'}); 
    }
    else {
        $div.css({'position': 'static', 'top': 'auto', 'width': '100%'});
    }
}

$("#navwrap").data("top", $("#navwrap").offset().top); // set original position on load
$(window).scroll(fixDiv);

示例fiddle

- Rory McCrossan