Question

我有以下标记，我已为其制作了Plunkr：

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <nav class="navbar navbar-fixed-top">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand">MY SITE</a>
            </div>
          </div>
        </nav>
      </div>
    </div>
    <div class="row site-content">
      <div class="col-sm-2">
        <div class="main-nav">
          <div class="navbar">
            <div class="navbar-collapse collapse">
              <ul class="nav nav-stacked">
                <li><a>Link 1</a></li>
                <li><a>Link 2</a></li>
                <li><a>Link 3</a></li>
              </ul>
            </div>
          </div>
        </div>

      </div>
      <div class="col-sm-10 body-content">
        <!-- Lots of stuff -->
      </div>
    </div>
  </div>
</body>

我需要修复导航栏和导航菜单，但滚动时页面内容应隐藏在导航栏后面。

如果有背景图片，如何隐藏导航栏后面的内容？

Answer 1

当您使用inherit时，它将继承父元素属性，因此首先您需要设置标题以使用与您的身体相同的背景图像，因为您不从标题继承背景图像或颜色＆＃ 39; s容器。

其次，您需要为标题添加一个位置属性，以便修复＆＃39;它到页面顶部。在您的情况下，您似乎想要使用fixed位置。

这是updated plunker

如何隐藏div后面的页面内容和滚动的透明背景

1 个答案: