1

私のサイトのメニューバーとサイドバーの両方がくっついています。ただし、画面サイズが 700px 未満の場合、すべての div が 1 列に表示されます。私はcssメディアクエリでこれを行いました。メニューバーは上部に、メインバーは中央に、サイドバーは下部に表示されます。そのため、ページ (最大幅 = 700px) が 150px までスクロールされると、メニューバーが上部に固定され、メニューバーが固定されているためにメインバーが非表示になります。そして、サイドバーが来ると、それも上にくっつきます。

これはJavaScriptです：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/>
<script src='sticky.js' type='text/javascript'/>
<script>
    $(document).ready(function(){
        $("#menu,#sidebar").sticky({topSpacing:0});
    });
</script>

この厄介な状況で私を助けてください。画面サイズが 700px 未満の場合、メニューバーとサイドバーが非粘着性になります。

4

3 に答える 3

6

メディア クエリを使用すると、次のようなことができます。

<script>
    $(document).ready(function() {
        if(window.matchMedia('(min-width: 700px)').matches) {
            $("#menu,#sidebar").sticky({topSpacing:0});
        }
    });
</script>

これは、それらをスティッキーにする唯一のものがこの JS 関数であると想定しています。

$(window).height() > 700の代わりに使用することもできますwindow.matchMedia('(min-width: 700px)').matches。

于 2013-08-11T06:23:31.443 に答える
0

...画面サイズが 700px 未満の場合、メニューバーとサイドバーは固定されなくなります...

それを逆にしましょう。「…画面サイズが 700px を超えると、メニューバーとサイドバーがくっついてしまう…」

画面の解像度を確認し、画面が 700px を超える場合にのみスティッキーを追加することをお勧めします。具体的には：

<script>
    $(document).ready(function(){
        if ($(window).height() > 700) {
            $("#menu,#sidebar").sticky({topSpacing:0});
    });
</script>

よろしくお願いします、

ティム。

于 2013-08-11T06:25:24.380 に答える