滾動 - 隱藏內容

我正在尋找一種方式來滾動內容Hide。讓我解釋。滾動 - 隱藏內容

這從Treehouse網站：

正常的內容：

enter image description here

當滾動：

enter image description here

正如你看到的內容隱藏並出現行。去看看here

有沒有人想法他們是怎麼做到的？

不清楚你在問什麼 –

我在問他們是如何實現這種風格的，即滾動隱藏內容和幻燈片到這一行 –

這是因爲在滾動的div下降

它們添加類shadowy到

<div class="heading-pocket"></div>

 .heading-pocket.shadowy { 
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); //cause of the shadow on top 
     transition-duration: 0.2s; 
    }

在滾動回頂部他們正在刪除類shadowy

2014-02-28 04:27:41 sanjeev

他們通過JS添加類對嗎？你能給我一個代碼的例子嗎？ –

此鏈接將幫助你http://stackoverflow.com/questions/12558311/add-remove-class-with-jquery-based-on-vertical-scroll – sanjeev

幫助了很多！謝謝@Sanjeev –

-2

它被稱爲CSS。你想要的位置：固定在你想要覆蓋內容的任何「標題」上。

把你的下背部投票....

2014-02-28 04:21:36 Tyler

我其實並沒有投票給你。我知道它是CSS Tyler，但是這個Scroll Hide的特定樣式非常棒，我正在尋找一種方法來複制它並學習。 –

我同意造型非常酷。如果使用正確的話，它可以創造奇蹟...除了它現在已經被過度使用，因爲bootstrap專門在其navbars中使用了它。我不能說其他框架，但立場：固定很好。使用它幾乎和使用頂部，左側，右側，底部元素的絕對定位元素一樣使用 – Tyler

我不是在談論位置，我是在談論滾動時發生的過渡。 –

回答