修复导航栏显示背景颜色

问题描述：

嗨，大家好，我在我的网站上有一个问题，当我调整它的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) 
});

答

试试这个，如果这是你所追求的：

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

答

我能看到的 '.navbar默认' 元素的CSS样式？也许添加显示：块; height：100px;将解决这个问题？

修复导航栏显示背景颜色

相关推荐