隱藏/顯示位置：非固定容器下的固定容器

如何在頁面背景中放置內容的position:fixed容器，同時其他內容在其上滾動，同時仍保持點擊背景元素的能力？隱藏/顯示位置：非固定容器下的固定容器

該效果類似於前景內容在固定背景上滾動的視差滾動情形，但我希望能夠將HTML放置在背景中，而不僅僅是圖像，並且我希望能夠進行交互與該HTML。

具體來說，I set up a Fiddle（下面的代碼），在我的頁面的頂部，用戶可以通過滾動系列全寬div容器，和我有一個position:fixed畫廊上z-index:-1最後一個頂層容器之後被「透露」滾動。繼續滾動瀏覽頁面會產生隱藏固定畫廊的附加全角div容器。

我可以看到在頂部容器和底部容器之間實現這個「顯示」空間的唯一方法是通過添加一個像素高度爲中間的空容器 - 但這會阻止用戶點擊下面的圖庫中的任何內容。另外，理想情況下，我希望高度基於視口高度，而不是固定像素數。有沒有更好的方法來創建相同的佈局？或者這種設置的解決方法？

我已經能夠找到我想要在http://pro.boombotix.com（特別是在「防水」之前的畫廊部分）實現的示例。他們似乎正在用javascript做它，但他們有大量的代碼，我在排序時遇到了麻煩。

任何幫助表示讚賞！

<html> 
<head> 
    <style> 
     body { 
      margin: 0; 
      padding: 0; 
     } 
     .section { 
      width: 100%; 
      background-color: gray; 
      z-index: 0; 
      padding: 300px 0; 
      text-align: center; 
     } 
     .white { background-color: white; } 
     #gallery { 
      position: fixed; 
      z-index: -1; 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 100%; 
      background-color: linen; 
     } 
     #gallery a { 
      width: 20%; 
      padding: 75px 0; 
      display: inline-block; 
      text-align: center; 
     } 
     .pink { background-color: pink; } 
     .blue { background-color: cyan; } 

     #gallery-pusher { 
      height: 1000px; 
     } 

    </style> 
</head> 
<body> 

    <div class="section"> 
     <h1>Top Section 1</h1> 
    </div> 
    <div class="section white"> 
     <h1>Top Section 2</h1> 
    </div> 
    <div id="gallery"> 
     <a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a><a href="test.html" class="pink">Link</a><a href="test.html" class="blue">Link</a> 
    </div> 
    <div id="gallery-pusher"></div> 
    <div class="section"> 
     <h1>Bottom Section 1</h1> 
    </div> 
    <div class="section white"> 
     <h1>Bottom Section 2</h1> 
    </div> 


</body> 
</html>

來源

2016-07-15 sapp5

「我怎樣才能把一個位置：在該後臺頁面的內容固定的容器，而其他的內容滑過它，同時仍保持點擊的背景元素的能力嗎？」

我會停下來在這第一個問題，併爲您提供此。忽略其他網站是如何做到這一點，並從這個概念開始工作的。如果使用margin-top：10px或其他東西將可滾動內容分隔開，則可以單擊該空間。只是不要將可滾動內容放在與固定內容重疊的容器div中。嘗試一下。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>Fixed Background Test</title> 
    <meta http-equiv="Content-Style-Type" content="text/css"/> 
    <meta http-equiv="Content-Script-Type" content="text/javascript"/> 
    <style type="text/css"> 
     html { 
      height: 100%; 
      margin: 0px; 
      border: 0px; 
      padding: 0px; 
     } 

     body { 
      height: 100%; 
      margin: 0px; 
      border: 0px; 
      padding: 0px; 
     } 

     .fixed { 
      position: fixed; 
      z-index: 1; 
      width: 100%; 
      height: 100%; 
      top: 0px; 
      left: 0px; 
      background-color: #F6E4CE; 
      overflow: hidden; 
     } 

     .fixed_content { 
      margin-top: 20px; 
      background-color: #808080; 
      height: 100px; 
      cursor: pointer; 
     } 

     .scrollable { 
      position: relative; 
      z-index: 2; 
      margin-top: 40px; 
      background-color: #94DD7B; 
      height: 100px; 
     } 
    </style> 
</head> 
<body> 
<div class="fixed"> 
    <div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div> 
    <div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div> 
    <div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div> 
    <div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div> 
    <div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div> 
    <div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div> 
    <div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div> 
    <div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div> 
    <div class="fixed_content" onclick="alert('Hey There!');">Click Me!</div> 
</div> 
<div class="scrollable">This is some fixed content.</div> 
<div class="scrollable">This is some fixed content.</div> 
<div class="scrollable">This is some fixed content.</div> 
<div class="scrollable">This is some fixed content.</div> 
<div class="scrollable">This is some fixed content.</div> 
<div class="scrollable">This is some fixed content.</div> 
<div class="scrollable">This is some fixed content.</div> 
<div class="scrollable">This is some fixed content.</div> 
<div class="scrollable">This is some fixed content.</div> 
<div class="scrollable">This is some fixed content.</div> 
<div class="scrollable">This is some fixed content.</div> 
<div class="scrollable">This is some fixed content.</div> 
<div class="scrollable">This is some fixed content.</div> 
<div class="scrollable">This is some fixed content.</div> 
<div class="scrollable">This is some fixed content.</div> 
<div class="scrollable">This is some fixed content.</div> 
<div class="scrollable">This is some fixed content.</div> 
<div class="scrollable">This is some fixed content.</div> 
<div class="scrollable">This is some fixed content.</div> 
</body> 
</html>

來源

2016-07-16 00:31:58 user3163495

太棒了！我沒有考慮使用保證金。看起來它會給我我需要的行爲。謝謝！ – sapp5

我注意到，如果我將原始代碼的固定容器更改爲z-index：1，並將可滾動容器更改爲位置：relative/z-index：2，如在您的示例中那樣，解決了我測試過的所有瀏覽器中的問題。但是你的例子還是比較好的，因爲它不依賴於非語義的div。 – sapp5

隱藏/顯示位置：非固定容器下的固定容器

回答

相關問題