0

ユーザーが下にスクロールして消えるとすぐに右側に貼り付けたいサイドバーがあります。そうする私の最初の試みは次のようになりました：

$(window).scroll(function(){
    if($(window).scrollTop() >= 524){
    if(!$(".page #sidebar").hasClass("sticky")){
        $(".page #sidebar").addClass("sticky");
    }
    }
    else{
    if($(".page #sidebar").hasClass("sticky")){
        $(".page #sidebar").removeClass("sticky");
    }
    }
});

クラスstickyにはposition: fixedと のtop値rightがあったため、ブラウザー ウィンドウに正しく固定されます。悲しいかな、私がテストしていたとき、私はこの欠点に気付きました.画面の右側にサイドバーがあるため、ブラウザウィンドウのサイズを作業中の解像度より下に変更すると、もちろん、サイドバーはブラウザウィンドウに対して相対的にそこにとどまります.

そこで、この解決策を思い付きました。サイドバーを絶対配置で別の相対的に配置されたコンテナー内に配置し、その位置を JavaScript で計算します。（私が思うに）不必要に重いことは別として、この解決策は機能しますが、イベントが十分に速く発生しないため、要素がちらつきます。.scrollコードは次のとおりです。

$(window).scroll(function(){
    if($(window).scrollTop() >= 524){
    if(!$(".page #sidebar").hasClass("sticky")){
        $(".page #sidebar").addClass("sticky");
    }
    else{
        $(".page #sidebar").css("top",$(window).scrollTop()-524+"px");
    }
    }
    else{
    if($(".page #sidebar").hasClass("sticky")){
        $(".page #sidebar").removeClass("sticky");
    }
    }
});

実際の例は、 http ://www.onewayitalia.it/agenzia-di-comunicazione/web-agency-per-la-realizzazione-di-siti-e-portali-internet/ で見ることができます。

おもしろいのは、私が書いているときに、stackoverflowが私が「 Similar Questions」サイドバーで達成したいことと同じことをしていることに気付いたことです。また、固定配置を使用しているようで、ウィンドウのサイズ変更で壊れることはありません。洞察はありますか？

4

1 に答える 1

0

計算された位置をキューに入れずに$.animateを試すことができます。これはよりスムーズに見えるかもしれません

于 2012-07-06T17:51:20.707 に答える