0

position:relativeこんにちは友人私はフローティングdivを設計し、それは完璧に機能しますが、いくつかの理由のために、またはposition:absolute私のコードで使用したくない

$(window).scroll(function () {

        var topWindowPosition = $(window).scrollTop();
        var leftWindowPosition = $(window).scrollLeft();
        var topLeftNavHeight = 200;
        if (topWindowPosition >= topLeftNavHeight) {
            $("#scroll").css({ top: topWindowPosition - topLeftNavHeight, left: 0, position: 'relative' });
        } else {
            $("#scroll").css({ top: 0, left: 0, position: 'relative' });
        }
        $("#scroll").forceRedraw();
    });

こちらで作業デモもご覧いただけます

http://jsfiddle.net/9E225/1/

ポジションを使わなくても同じ効果が得られますか？助けてください。

前もって感謝します

4

2 に答える 2

3

marginsの代わりに使用してpositionsください。例えば：

if (topWindowPosition >= topLeftNavHeight) {
    $("#scroll").css({ marginTop: topWindowPosition - topLeftNavHeight, marginLeft: 0});
} else {
    $("#scroll").css({ marginTop: 0, marginLeft: 0 });
}

jsFiddle: http://jsfiddle.net/9E225/2/

于 2012-04-04T11:22:22.790 に答える
1

このアプローチについてあなたがどのように感じているかはわかりません。スクロール要素を超えると要素を所定の位置にスナップし、戻るとすぐに元に戻します。このアプローチの主な利点は、#scrollスクロール イベントが発生するたびに、要素が「ジャンプ」して元に戻り、再配置されないことです。

例| コード

var $el = $("#scroll");
var original_top = $el.position().top;

$(window).scroll(function () {
    //Scrolled past element
    if($(window).scrollTop() >= original_top){
        //Add hooked element, if it's not already hooked
        if(!$el.hasClass("hooked")) $el.addClass("hooked");
    }else if($(window).scrollTop() <= original_top){
        //Scrolled up before element, remove hooking and return back to normal
        if($el.hasClass("hooked")) $el.removeClass("hooked");
    }
});

CSS

.hooked{
    position: fixed;
    top: 0;
    left: 0;
}

また、この「JQuery Waypoints」ライブラリをご覧になることをお勧めします。上記のコードと同じように動作しますが、より多くの機能があります。:)

于 2012-04-04T11:34:44.330 に答える