6

JavaScriptを使用してスティッキーサイドバーを作成しているレスポンシブサイトがあります。

また、ブラウザのサイズが768ピクセル未満の場合、メディアクエリを使用して複数列のレイアウトから単一列のレイアウトに変更しています。

単一列レイアウトでスティッキーメニュースクリプトを無効にする方法を理解する必要があります。基本的に、スクリプトステートメントのメディアクエリのようなものが必要です。

これは、スクリプトを有効にするために使用しているコードです。

<script>
jQuery('#info').containedStickyScroll({
        duration: 0,
        unstick: false
    });
</script>

ウィンドウの幅が768px以上の場合にのみトリガーするように追加できるものはありますか？

編集：ユーザーがその場でウィンドウのサイズを変更した場合に機能するソリューションを探しています。

4

3 に答える 3

7

これを試して。

$(function(){
     $(window).resize(function(){
         if($(this).width() >= 768){
             jQuery('#info').containedStickyScroll({
                 duration: 0,
                 unstick: false
             });
         }
      })
      .resize();//trigger resize on page load
});
于 2012-04-26T02:18:14.680 に答える
0

このコードを試してください：

var height = $(window).height(); //I'm assuming you mean height, you can try .width() if yo u need it

if (height < 768) {
  jQuery('#info').containedStickyScroll({
      duration: 0,
      unstick: false
  });
}

お役に立てば幸いです。

于 2012-04-26T02:20:24.450 に答える
0

これをチェックしてください：

var targetWidth = 768;
if ( $(window).width() &gt;= targetWidth) {     
  //Add your javascript for screens wider than or equal to 768 here
  jQuery('#info').containedStickyScroll({
      duration: 0,
      unstick: false
  });
}
else {
  //Add your javascript for screens smaller than 768 here
  console.log(`am less than ${targetWidth}`)
}
于 2018-09-12T07:21:49.883 に答える