如何通過css，js或jquery隱藏透明標頭後面的內容？

-1

我製作了一個標題，由帶有徽標和社交鏈接的頂部透明部分以及從頂部填充的導航欄組成。 this is the transparent header that i've made。在導航欄上，我有一些錨點，它工作得很好（我已經添加了引導程序中所需的填充，然後它工作正常）。問題在於，當我滾動頁面時，內容會出現在我的標題後面。 look here what is happening now。這不是我想要的。我已經閱讀了大量關於類似情況的文章，但是我還沒有找到解決方案。是否有JavaScript解決方法或技術來隱藏內容div時，他們通過導航欄？我怎樣才能做到這一點？我真的很想保存透明的頂部標題！非常感謝和問候！如何通過css，js或jquery隱藏透明標頭後面的內容？

來源

2016-11-26 Federico Angeloni

你忘了添加的圖片？ –

對不起，我已經添加了...這是我的第一個問題抱歉！ ;） –

你希望它是透明的，直到有人滾動頁面？那麼你想要發生什麼？ – ppovoski

你可以把你的滾動內容爲元素<div class="content">...</div>和風格它溢出隱藏：

.content { 
    overflow: hidden; /* or "auto" or "scroll" */ 
}

這樣一切內容元素之外將被隱藏。

如果這對你有幫助，那麼很好:) 如果不是，我可以幫你更好，如果你會張貼示例頁面。

來源

2016-11-26 22:58:43 FirePanther

謝謝@FirePanther我試過你的解決方案，我已經在一個div中創建了我的滾動內容，並更新了css，但它似乎不起作用。內容再次位於透明標題後面！ –

你可能會發佈網址到您的網頁或導出不工作的部分？所以我可以將溢出部分整合進去。div應該放在logo下面，如果你的logo位置是絕對位置或者固定位置，而content div位於它下面，你就需要'margin-top：{logoheight} px;'或者類似的東西 – FirePanther

標題由帶有徽標和社交按鈕+導航欄的頂部標題組成。所有標題都是固定的。我已經添加了保證金頂部，這已經解決了我的內容的「起點」。問題是當我滾動頁面。另外添加「overflow：hidden」它會繼續出現在標題後面，並且由於它是透明的，因此會顯示。我已經解決了添加與背景相同圖像的問題（請參閱下面的解決方案）！有了這個技巧，我已經取得了相同的結果，現在當我滾動頁面時，內容隱藏在圖像後面！ ;）非常感謝！ –

我發現沒有JS或Jquery的最簡單的解決方案。

1）確保您的標題包含在特定的div中併爲其設置類。例如：

<div class="content_header">...</div>

2）假設你已經設置了背景圖片爲您的身體（或包含內容的DIV），在你的CSS補充一點：

.content_header { 
position: fixed; 
background: url("...same of body's background image") no-repeat center fixed (same shorthand parameter, if any); 
background-size: cover;}

3）通過這種方式，您將獲得一個背景圖像，它會產生虛假的「透明標題」效果，並且您將解決滾動顯示在透明標題後面的內容的問題。

我希望，你會發現這很有用，我想感謝那些給了我提示的傢伙;）

來源

2016-11-27 00:08:01

如何通過css，js或jquery隱藏透明標頭後面的內容？

回答

相關問題