토글 버튼이 활성화되어있을 때 navbar 배경을 표시하는 방법

Question

내 navbar를 설정하는 방법은 상단으로 스크롤 할 때 navbar 배경이 투명하고 스크롤을 시작하자마자 navbar 배경이 검은 색으로 나타납니다. 내가 지금 가지고있는 유일한 문제는 내가 모바일 크기 일 때 상단에 스크롤 할 때입니다. Navbar toggle 드롭 다운 버튼을 클릭하면 드롭 다운 메뉴의 배경이 투명 해집니다. 브라우저의 맨 위로 스크롤 할 때 드롭 다운 메뉴가 활성화되어있을 때 검정색 배경을 표시하는 방법을 찾고 싶습니다.

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> 

자바 스크립트

<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; 
} 
}