0

画面とともにスクロールダウンするサイドバーメニューを配置するjQueryスクリプトがあります。

<head>    
<script type="text/javascript">
    jQuery(function($) {
    function fixDiv() {
      if ($(window).scrollTop() > 365)
        { 
        $('#Portfolio-Sidebar-Content-Web').css({'position': 'fixed', 'top': '0', 'margin-top': '20px'}); 
        }
      else
        {
        $('#Portfolio-Sidebar-Content-Web').css({'position': 'static', 'top': 'auto', 'margin-top': '0'});
        }
    }
    $(window).scroll(fixDiv);
    fix5iv();
    });
    </script>
</head>

これはデスクトップでは問題なく機能しますが、タブレットやモバイルでズームすると、div が画面に固定されてコンテンツと重なるため、動作が異なります。

これは、jQuery スクリプトによって適用されたスタイリングをオーバーライドして、@media クエリを開始し、タブレットまたはモバイル デバイスで div を別の方法で配置する場所です: (@media スタイリングはスタイル シートの一番下に配置されます)

@media only screen and (max-device-width: 480px) {
    #Portfolio-Sidebar-Content-Web{
        position: fixed !important;
        top: 0px !important;
        }
}

ただし、このコードは私には機能しません:/ jQuery スタイルは、適用する CSS の配置を常にオーバーライドするようで、div はどのデバイスでもスクロールし続けます。

4

1 に答える 1