帶透明度的粘性頂部菜單（僅滾動部分文檔）

我在頁面頂部創建了一個粘性菜單，並將其設置爲一個固定的位置。帶透明度的粘性頂部菜單（僅滾動部分文檔）

然後我意識到，很高興看到背景中的圖片調整div的不透明度。

開始出現問題，因爲當我滾動頁面時，所有的文本都顯示在div後面，我不想那樣。

我試圖找出一種方法來使用overflow-y只滾動頁面的一部分，但它需要一個固定的高度來工作。

我被卡住了。有什麼建議麼？

這是我工作的頁面：

http://in2apps.com/nowa/

我需要滾動只有內容框格，但我不想給它一個固定的高度。

的HTML代碼：

<!DOCTYPE html> 
<html lang="es"> 
    <head> 
    </head> 
    <body style="background-image:url('img/1.jpg')"> 
     <div id="top-bar-box"> 
      <div id="top-bar"> 
       <div id="logo"> 
        <a><img src="img/logo.png" alt="Logo"/></a> 
       </div> 
       <div id="top-menu"> 
       </div> 
      </div> 
     </div> 
     <div id="content-box"> 
      <div id="content"> 
       <div class="icon"></div> 
       <h1>Título Principal</h1> 
       <h2>Título Secundario</h2> 
       <h3>Subtítulo</h3> 
       <p>... Text...</p> 
      </div> 
     </div> 
    </body> 
</html>

和的DIV的CSS：

#top-bar-box { 
    background-color: rgba(255, 255, 255, 0.5); 
    color: #b20000; 
    margin: 0 auto 20px auto; 
    text-align: center; 
    position: fixed; 
    width: 100%; 
    z-index: 1; 
} 

#top-bar { 
    height: 120px; 
    margin: 0 auto; 
    max-width: 960px; 
} 

#content-box { 
    position: relative; 
    top: 140px; 
    margin: 0 auto 20px auto; 
} 

#content { 
    background-color: rgba(255, 255, 255, 0.8); 
    margin: 0 auto; 
    max-width: 940px; 
    padding: 10px; 
    border-radius: 10px; 
}

編輯：

在此頁面，您可以執行後看到的結果@ AlienWebguy的解決方案。

http://in2apps.com/nowa/index4.php

來源

2013-12-20 Memochipan

CSS：

body { 
    overflow : hidden; 
} 

content-box { 
    overflow : scroll; 
}

jQuery的

$('#content-box').css('height', ($(window).height() - 140) + 'px');

來源

2013-12-20 22:06:55 AlienWebguy

它不工作。我已經測試過這個組合。但文本在頁面底部被剪切，滾動不起作用，被禁用。 – Memochipan

對，你需要設置高度，如果你沒有手動做。看我的編輯。你會想把它放到一個函數中，並將它綁定到'resize'窗口事件。你可以通過在腳本底部添加它來測試它，它應該可以在加載時工作。 – AlienWebguy

謝謝。這是該機器的缺失部分。好的解決方案 – Memochipan

使用此插件JQ：

http://bigspotteddog.github.io/ScrollToFixed/

然後做一個CSS類像這樣的例子：

.filter.scroll-to-fixed-fixed { 
background: #F2F4F5; 
height: 65px; 
padding-top: 20px; 
}

來源

2013-12-20 22:13:32 Foxsk8

帶透明度的粘性頂部菜單（僅滾動部分文檔）

回答

相關問題