トグルボタンがアクティブなときに、navbarの背景が表示される方法

Question

私の現在のナビゲーションバーの設定方法は、上にスクロールしたときのナビゲーションバーの背景が透明になり、スクロールダウンを開始するとすぐにnavbarの背景が黒く表示されます。私が現在行っている唯一の問題は、私がモバイルサイズで、トップにスクロールしているときです。ナビゲータのトグルドロップダウンボタンをクリックするとドロップダウンメニューの背景が透明になります。スクロールしているので、ブラウザの上部までスクロールしたときにドロップダウンメニューがアクティブなときに黒い背景が表示されるようにする方法を見つけたいと思います。

HTML

<nav class="navbar navbar-default top-of-page"> 
    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"><img src='/CMS_Static/Uploads/313864614C6F6F/fv-logo-3.gif' align="left"/></a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul id="navLinks" class="nav navbar-nav"> 
     <li><a href="http://www.floridavisions.com">Home</a></li> 
     <li><a href="/services">Services</a></li> 
     <li><a href="/stock">Stock Photography/ Footage</a></li> 
     <li><a href="/contact">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

Javaスクリプト

<script> $(window).on("scroll", function() { 
    var scrollPos = $(window).scrollTop(); 
    if (scrollPos <= 0) { 
     $('.navbar-default').addClass('top-of-page'); 
    } else { 
     $('.navbar-default').removeClass('top-of-page'); 
    } 
}); 
    </script> 

CSS

.top-of-page { 
     background-color: transparent; 
    } 
.navbar-default { 
     background-color: black; 
     background: rgba(0,0,0,.85); 
     min-height: 90px; 
     position: fixed; 
     border-radius: 5px; 
     border: none; 
     width: 100%; 
     z-index: 1; 
    } 
    #navLinks { 
     padding-left: 20px; 
    } 
    #navLinks li { 
     padding-top: 20px; 
     padding-right: 10px; 
    } 
    #navLinks li a { 
     color: white; 
     font-size: 1.1em; 
     font-weight: 700; 
    } 
    #navLinks li a:hover { 
     color: #a6b1c4; 
    } 
    .navbar-brand img { 
     height: 35px; 
    } 

Answer 1

は、メディアクエリを記述します。デバイスの幅が何かよりも小さい場合、電話の場合は700pxとし、背景色をトップページクラスにします。 コード...

@media only screen and (max-width: 500px) { 
.top-of-page{ 
    background-color: #000; 
} 
}