滚动 - 隐藏内容

我正在寻找一种方式来滚动内容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

我不是在谈论位置，我是在谈论滚动时发生的过渡。 –

回答