0

以下のコードを使用して、ページ幅に基づいてサイドバー メニューを固定または非固定にしようとしています。基本的に、"unstick" は、ウィンドウの幅が 768 ピクセルを超える場合は false、768 ピクセル未満の場合は true にする必要があります。ユーザーがページのサイズを変更した場合にも更新する必要があります。

最初のページ読み込みでは適切に機能しますが、サイズ変更時には常に機能するとは限りません。ページが 768 を超えて開始し、縮小されている場合は、必要に応じて false から true への変更を固定解除します。しかし、そのように動かなくなり、ページが拡大されても元に戻りません。

ページが 768 未満で始まる場合、unstick は私が望むように true に設定されますが、ページのサイズを変更しても何も変わりません。常に true のままです。

私の条件に何か問題がありますか？

$(function(){
  $(window).resize(function(){
     if($(this).width() >= 768){
         jQuery('#info').containedStickyScroll({
             duration: 0,
             unstick: false
         });
     } else {
         jQuery('#info').containedStickyScroll({
             duration: 0,
             unstick: true
         });
     }
  })
  .resize();//trigger resize on page load
});
4

1 に答える 1

1

プラグインが古い events/dom 要素を削除していないようです。.containedStickyScroll を呼び出すたびに、以前のオプションの一部が保持されます。

これを修正するために私がしたことは次のとおりです。

$(function(){
    $(window).resize(function(){
        if($(this).width() >= 768){
            jQuery('#info').containedStickyScroll({
                duration: 0,
                unstick: false
             });
             $(".scrollFixIt").remove();
             $(window).unbind("scroll");
         } else {
             jQuery('#info').containedStickyScroll({
                 duration: 0,
                 unstick: true
             });
         }
    })
    .resize();//trigger resize on page load
});

お役に立てれば。

于 2012-04-27T18:46:08.083 に答える