Question

大家好，所以我在我的网站上遇到问题，当我将其调整为iphone版本时，它会在右侧显示一些空白区域，我使用此代码修复了此问题：

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

现在效果很好而且没有空白区域，但是我的导航栏现在根本没有显示，因为我使用的是javascript所以当用户滚动背景颜色时，但是因为我有overflow-x: hidden;它所以＃39; t不再工作，所以我想知道如何修复使用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)
});

Answer 1

如果这是你的目的，请试试这个：

＆＃13;

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

＆＃13;

body {margin: 0}

.navbar-default {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

main {
  height: 2000px;
}

＆＃13;

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

＆＃13;

Answer 2

我能否看到＆＃39; .navbar-default＆＃39;的css样式？元件？也许添加display：block;身高：100px;会解决这个问题吗？

修复导航栏以显示背景颜色

2 个答案: