0

ウィンドウの上部からの距離を確認し、ユーザーがスクロールした場合にjQueryでcssを変更する方法を探しています。私はこのようなことを試しましたが、機能しません：

var topDistance = $('div').offset().top; // distance of the div relative to the top of the window
$('div').css({position: 'absolute',top:topDistance, right:'0px'});

jQuery cssの「top」プロパティに変数を配置する方法はありますか？上記のコードを試しましたが、機能しないようです。誰かがコードを改善する方法を知っていますか？

4

1 に答える 1

3

offset()Webページの上部からオフセットの値を取得するために使用できます。私はこれをメニューのスクロールに使用します（ユーザーがページを下にスクロールするときにユーザーをフォローします）。

scroll()CSSを変更するには、ウィンドウでイベントを使用する必要があります。これは、ユーザーがスクロールするときに要素（メニューなど）をページの下に移動するために使用するコードです。うまくいけば、これはあなたを助けるでしょう：

var scrollTimer;

jQuery(document).ready(function($){
    // this will set a callback on the scroll event for the window
    $(window).scroll(function(e){
        // i'm using a timer so that the menu "catches up" once the user has scrolled and finished scrolling
        clearTimeout(scrollTimer);
        scrollTimer = setTimeout(function(){
            scrollSidebar();
        }, 200);
    });
});

// this function will animate the object down
function scrollSidebar(){
    // get the scroll location of the body 
    var scrollTop = $('body').scrollTop();

    // offset of the menu I want to follow as you scroll
    var offset = $('#scroll-menu').offset();

    // get the margin-top to see if its already scrolled down at all
    var margintop = $('#scroll-menu').css('margin-top');

    // this just checks if the user has scrolled down so the top of the menu element is now off the screen (e.g. if they have scrolled too far then the menu should follow the scroll amount, if the top of the element is in view then it needs to revert to the top again)
    if(scrollTop > (offset.top-parseInt(margintop))){
        $('#scroll-menu').animate({'margin-top':(scrollTop-(offset.top-parseInt(margintop)))+'px'}, "fast"); // 20 px extra padding
    }
    else {
        $('#scroll-menu').animate({'margin-top':'0px'});
    }
}
于 2012-09-21T14:01:52.560 に答える