向下滚动时标题会发生变化(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

编辑

好极了!我能够用这个小提琴演示这个例子!:)

祝好运!