4

以下の例で、 js によってメニュー バーが変更された後、メディア クエリがメニュー バーの高さの変更を停止するのはなぜですか? (ウィンドウを小さくし、矢印をクリックしてミニ メニューを展開します)。メニュー要素などの原点を登録する必要がありますか?

CSS:

#menu {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 90px;
    z-index: 11000;
    opacity: 1;
    background-color: #F03600;
    }

JS:

if ($("#arrowup").css('top') == '0px') {
    $("#menu").animate({'height':'270px'}, 800, "easeInOutQuint");
    } else {
    $("#menu").animate({'height':'55px'}, 800, "easeInOutQuint");
    }

ここでページを確認できます。すべてのコードは 1 つのページにあります。

http://www.nioute.co.uk/stuff/

また、メディア クエリと js の相互作用に関しては、どのような読み物がありますか?

ありがとう！

4

2 に答える 2

9

メディア クエリが機能しない理由は、Javascript でバーを変更すると、インライン CSS が適用されるためです。これは、スタイルシートにある可能性のある CSS をオーバーライドします。問題は、矢印を下に切り替えると#menu、インラインスタイルがheight="55px"適用され、通常のスタイルがブロックされること90pxです。

解決策は、ウィンドウのサイズがメディアクエリのブレークポイントよりも大きくなったときにスタイルをクリアし、$(window).resize(function()...);ブレークポイントに対してウィンドウの現在の幅を確認することです。true が返された場合は、$('#menu').attr('style', '');and を呼び出してインライン スタイルを削除します。

于 2013-07-12T19:58:54.247 に答える