向下滚动时隐藏透明固定导航栏下的内容

Question

问题：我有一个透明的固定导航栏，上面有一些间隙（页边空白）和下面的内容，它位于导航栏下面，同时全局向下滚动。问题是导航栏是透明的，页面的背景是不同图像的动态幻灯片，所以我不能使用z索引并通过更改背景颜色或将图像与背景相同来隐藏它。。

结论：

• 带间隙的透明固定导航条
• 动态图像背景
• 它必须是全局滚动（不能对div内容使用滚动）
• 我正在使用引导程序3

图纸：

错误：[现在看起来如何][1]

右图：【应该如何】【2】

  [1]: https://i.stack.imgur.com/Iwc1h.png
  [2]: https://i.stack.imgur.com/f1Sbd.png

很抱歉在理解我时出现问题，以下是代码：http://jsfiddle.net/5myw4e26/

Answer 1

如果你使用的是固定在导航栏上的位置，你可以在顶部做一个空的div，向左浮动，高度与导航栏的大小一致。

Answer 2

我设法完成了我们要做的事情。这可能不是最好的解决方案，但它有效。

使用JQuery，我计算了一个段落（p.content）和navigation-bar何时发生冲突。

有足够的微调，所以你可以根据自己的需要进行调整。

JQuery

$(document).ready(function() {
      $(document).scroll(function() {
        $("p").each(function() {
          if ($(this).offset().top <= $(document).scrollTop() + 32) {
            $(this).css("opacity", "0");
          } else {
            $(this).css("opacity", "1");
          }
        });
      });
    });

请注意，$(this).offset().top <= $(document).scrollTop() + 32中的32是导航栏的高度

示例：

$(document).ready(function() {
  $(document).scroll(function() {
    $("p").each(function() {
      if ($(this).offset().top <= $(document).scrollTop() + 32) {
        $(this).css("opacity", "0");
      } else {
        $(this).css("opacity", "1");
      }
    });
  });
});

body {
  margin: 0px;
  font-family: Arial;
  font-size: 12px;
  min-height: 2000px;
}
nav {
  width: 100%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  position: fixed;
  top: 0;
  border-bottom: 1px solid black;
}
p.content {
  margin: 12px 0px 0px 0px;
  background: yellow;
}
p:first-of-type {
  margin: 44px 0px 0px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="wrapper">
  <nav>
    Navigation Bar
  </nav>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed dolor metus. Morbi tristique nisl vel lectus rutrum, non ultricies dolor feugiat. Fusce nec dolor in purus consectetur lacinia non sit amet turpis. Donec facilisis tortor mauris, nec vulputate
    massa fermentum vel. Praesent in neque quis lacus hendrerit tincidunt sed et dolor. Nullam fermentum, orci at pulvinar imperdiet, lacus libero facilisis ante, sit amet venenatis sem tortor in nibh. Ut ullamcorper porta fermentum. Praesent faucibus,
    erat eget iaculis porttitor, purus purus posuere nulla, eget lacinia odio libero in lectus. Vivamus sem ex, commodo ac tortor ut, fringilla vulputate eros. Ut iaculis augue non ipsum porttitor ornare.</p>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis tellus luctus ornare hendrerit. Curabitur hendrerit justo ante. Maecenas scelerisque ligula condimentum, aliquam tortor sit amet, aliquam lacus. Interdum et malesuada fames ac
    ante ipsum primis in faucibus. Ut ut augue vel massa tempus laoreet. Nulla porttitor, sem ac aliquet facilisis, purus ligula pulvinar ipsum, quis volutpat enim elit sed ante. Pellentesque quis diam vestibulum, viverra elit at, sollicitudin mi. Vivamus
    vehicula ex eu justo feugiat, a ullamcorper nisi commodo. Phasellus sed tortor eget purus mollis tempor at sit amet libero. Fusce tincidunt est est, tristique pretium justo feugiat eget. Donec et lacus vehicula, aliquam sapien a, eleifend tortor.</p>
  <p class="content">Vivamus vitae placerat elit. Integer eleifend nibh at purus suscipit rutrum. Aliquam et fermentum mauris. Aenean gravida velit a vehicula aliquet. Duis neque tortor, luctus eget condimentum eget, venenatis eget lorem. Maecenas sed ullamcorper tellus.
    Donec euismod bibendum nunc, non ullamcorper neque cursus eget. Curabitur dapibus orci non quam vestibulum ornare. Aenean tincidunt interdum justo faucibus feugiat. Proin molestie lorem ultricies neque consequat, commodo cursus nisl molestie. Donec
    gravida viverra nisl, consectetur laoreet libero interdum ac. Vivamus varius vestibulum quam eu rutrum. Pellentesque id rhoncus massa.</p>
  <p class="content">Nunc finibus leo mollis efficitur tempus. Suspendisse ac elit lectus. Proin auctor ipsum faucibus arcu cursus congue. Nam rutrum odio non enim euismod auctor id in justo. Ut non sagittis orci, vel tincidunt elit. Mauris odio sem, varius eget tortor
    at, commodo pretium massa. Cras sed rhoncus dolor, non dictum sem. Curabitur in imperdiet turpis, in imperdiet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas erat nisl, sagittis id eleifend ut, consequat eget orci. Aenean
    blandit arcu non varius ornare.</p>
  <p class="content">Pellentesque molestie consectetur lectus in iaculis. Curabitur efficitur ac nisi vitae eleifend. Morbi semper tristique ornare. Morbi in cursus mauris. Morbi et risus velit. Etiam lobortis commodo dolor, ac pulvinar dolor gravida vel. Donec sollicitudin
    metus urna, eu consequat magna vehicula a. Vivamus interdum, enim non consequat ultrices, lacus enim vehicula ante, vitae tristique tellus nibh sit amet eros. Aliquam consequat eu orci id rutrum. Donec lacus eros, eleifend et viverra vitae, congue
    at turpis. Quisque rhoncus fermentum ex sed lobortis. Fusce luctus, lorem vitae condimentum gravida, nibh tortor elementum nulla, id auctor nisl ex eu lectus. Donec auctor ligula sem, et porttitor neque eleifend vitae. Aliquam felis lacus, sollicitudin
    laoreet dui mollis, scelerisque auctor metus.</p>
</div>