navbar를 사용하여 배경색 표시

Question

안녕하세요. 내 사이트에서 문제가 발생했습니다. iphone 버전의 크기를 조정하면 오른쪽에 공백이 표시됩니다.

html,body 
{ 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
     overflow-x: hidden; 
}  

이것은 완벽하게 지금 작동하지만 공백이 없지만 사용자가 배경색을 스크롤 할 때 javascript를 사용하기 때문에 내 navbar가 전혀 표시되지 않습니다. 왜냐하면 i가 overflow-x: hidden;을 가지고 있기 때문에 전혀 작동하지 않습니다. 더 이상 사용할 수 없을 때 navbar 배경을 수정하는 방법을 궁금합니다.

HTML :

<nav class="navbar navbar-default navbar-fixed-top" id="section1"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button"> 
         <span class="icon-bar"></span> <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         </button> 
     <a class="navbar-brand"><img alt="" src="Images/logo.png" class="img-responsive"></a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li> 
      <a href="#section1">Home</a> 
      </li> 
      <li> 
      <a href="#section2">About Me</a> 
      </li> 
      <li> 
      <a href="#section3">Skills</a> 
      </li> 
      <li> 
      <a href="#section4">Portfolio</a> 
      </li> 
      <li> 
      <a href="#section5">Hobbies</a> 
      </li> 
      <li> 
      <a href="#section6">Contact Me</a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </nav> 

JS :

$(document).ready(function() { 

    var checkScrollBar = function() { 
     $('.navbar-default').css({ 
      backgroundColor: $(this).scrollTop() > 1 ? 
       'rgba(25, 25, 25, 0.84)' : 'transparent' 
     }) 
    } 
    $(window).on('load resize scroll', checkScrollBar) 
}); 

Answer 1

이 시도 후 :

$(document).ready(function() { 
 
    var checkScrollBar = function() { 
 
    $('.navbar-default').css({ 
 
     backgroundColor: $(this).scrollTop() > 1 ? 
 
     'rgba(25, 25, 25, 0.84)' : 'transparent' 
 
    }) 
 
    } 
 
    $(window).on('load resize scroll', checkScrollBar) 
 
});

* {margin:0;padding:0;box-sizing:border-box} 
 
html, body {width:100%} 
 

 
.navbar-default { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 
main { 
 
    height: 2000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navbar navbar-default navbar-fixed-top" id="section1"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand"><img alt="" src="Images/logo.png" class="img-responsive"></a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li> 
 
      <a href="#section1">Home</a> 
 
     </li> 
 
     <li> 
 
      <a href="#section2">About Me</a> 
 
     </li> 
 
     <li> 
 
      <a href="#section3">Skills</a> 
 
     </li> 
 
     <li> 
 
      <a href="#section4">Portfolio</a> 
 
     </li> 
 
     <li> 
 
      <a href="#section5">Hobbies</a> 
 
     </li> 
 
     <li> 
 
      <a href="#section6">Contact Me</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<main></main>

Answer 2

나는 '.navbar 기본'요소에 대한 CSS 스타일을 볼 수 있을까요? 아마 display : block 추가; 높이 : 100px; 이 문제가 해결 되나요? 이것은 당신이 어떤 경우