修復導航欄顯示背景顏色

嗨，大家好，我在我的網站上有一個問題，當我調整它的iPhone版本時，它顯示了右側的一些空白區域，我使用此代碼修復了這個問題：修復導航欄顯示背景顏色

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

這現在完美的工作，沒有空白，但我的導航欄現在根本不顯示，因爲我使用JavaScript，所以當用戶滾動背景顏色顯示，但因爲我有overflow-x: hidden;它根本沒有工作所以我想知道如何修復顯示使用時的導航欄背景overflow-x: hidden;

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

來源

2017-10-21 RonTheOld

試試這個，如果這是你所追求的：

$(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>

來源

2017-10-21 15:11:16 VXp

我能看到的 '.navbar默認' 元素的CSS樣式？也許添加顯示：塊; height：100px;將解決這個問題？

來源

2017-10-21 15:01:26 Vuu

修復導航欄顯示背景顏色

回答

相關問題