11

現在、div下にスクロールし320pxた後に一番上に貼り付けることができますが、これを達成する別の方法があるかどうか知りたいと思っていました. 以下に私のコードがあります：

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ですか?

4

1 に答える 1

15

要素offset().topのを使用してみてください。#navwrapそうすれば、要素は、それがどこにあるかに関係なく、ドキュメント内の開始位置から固定されます。例えば：

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);

フィドルの例

于 2012-05-28T20:22:04.957 に答える