jquery - 向下滚动时标题会发生变化(jQuery)

Question

TechCrunch 最近重新设计了他们的网站，他们有一个可爱的标题，当你向下滚动时，他们的品牌会缩小为更薄的版本。

你可以在这里明白我的意思:http://techcrunch.com/

我将如何创建这样的东西？有没有教程，如果没有，各位好心人能给我一些从哪里开始的建议吗？ :)

Answer 1

这并不太难，只是一个简单的.scroll()事件。 由于面板的定位方式，我似乎无法随意完成此操作 检查编辑!。但基本上你所拥有的是顶部有一个 div ，它是 position:absolute 所以它总是在顶部，然后使用 .scroll()

$("body").scroll( function() {
    var top = $(this).scrollTop();
    // if statement to do changes
});

scrollTop()方法用于确定 body 滚动了多少。

根据您想要更改标题 div 的位置，您可以让 if 语句执行许多操作。在您提供的示例中，它会类似于

if ( top > 147 )
    // add the TechCrunch div inside the header
else
    // hide the TechCrunch div so that space is transparent and you can see the banner

编辑

耶!我能够制作 this fiddle来演示这个例子! :)

祝你好运!