向下滾動時，將內容隱藏在透明的固定導航欄中

Question

問題：我有透明的固定導航欄，其間隙（頂部距）在內容下方，位於全局欄下方時位於導航欄下方。 問題在於導航欄是透明的，頁面的背景是不同圖像的動態幻燈片，因此我不能使用z-index並通過更改背景顏色或將圖像與背景相同來隱藏它。

結論：

• 帶有間隙的透明固定導航欄
• 動態圖像背景
• 它必須是全局滾動（不能對div內容使用滾動）
• 我正在使用bootstrap 3

圖：

錯誤：[現在的樣子] [1]

右：[應該如何] [2]

  [1]: http://i.stack.imgur.com/Iwc1h.png
  [2]: http://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中的$(this).offset().top <= $(document).scrollTop() + 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>