1

私は現在<div>、ページが上下に移動したときに、ページの左側の左側の上部にその位置を維持するを持っています。これは正常に機能しますが、あまりスムーズではありません。

これをスムーズにスクロールできるように、以下のコードをリファクタリングしたいと考えています。現在、トリガーが発生すると、CSStopプロパティが設定されるだけです。これにより「ジッター」になります。cssのトップ値を正確な位置に設定するのではなく、これをスムーズなスクロールモーションにする方法が少しわかりません。

        //scrolling menu
    if($("#selectedOptions").length > 0){   //if the element exists
        $(window).scroll(function(){
            var div = $("#selectedOptions");        // the div that slides
            if(div) {                               
                var pos = div.parent().position().top;  //position of the top of the wrapper
                var windowPos = $(window).scrollTop();  //current window postion

                //top of moving div not to go further than
                var bottom = $("#sizeAndQuantHeader").position().top; //where the div shouldn't go past 

                //de-bug
                //console.log("pos: " + pos + " - winpos" + windowPos + ", heih: " + divHieght + " doc he: " + $(document).height() + " bott" + bottom);

                //if between the range then display at new postion
                if (windowPos > pos && (windowPos < bottom)) {
                    div.css("top", windowPos-pos);
                    //must be higher than its current position so set to 0
                 } else if (windowPos < pos && windowPos < bottom) {
                     div.css("top", 0);
                } 
            }
        });
    }

ページをスムーズにスクロールする方法に関するヘルプやヒントを<div>いただければ幸いです。

**アップデート

残念ながら、私はすでにさまざまなページ領域をスクロールしている要素を持っています：

var _scrollTo = function(div){
    $('html,body').animate({
        scrollTop: div.offset().top},
        'slow');
};

上記の関数が呼び出されると、呼び出しがトリガーされると思います。

  $(window).scroll(function(){animate div...

新しくアニメーション化されたdivのスクロールを遅らせます。他の場所で再利用されているため、コールバックも使用できません。ここで何かが足りないかもしれないので、アニメーションを使わないことにしました。

4

3 に答える 3

3

アニメーションを使用してスムーズにします。

div.animate({ top: windowPos-pos }, 300);
于 2013-01-17T13:21:00.440 に答える
1

重要なのは、ここでこのコードを変更することです。

if (windowPos > pos && (windowPos < bottom)) {
    div.css("top", windowPos-pos);
    //must be higher than its current position so set to 0
} else if (windowPos < pos && windowPos < bottom) {
    div.css("top", 0);
}

に

if (windowPos > pos && (windowPos < bottom)) {
    div.animate({top: windowPos-pos}, 100);
    //must be higher than its current position so set to 0
} else if (windowPos < pos && windowPos < bottom) {
    div.animate({top: "0"}, 100);
}

jQueryanimate()は本当に使いやすく/操作しやすいです。

于 2013-01-17T13:22:36.353 に答える