向下滚动时标题改变(jQuery) [英] Header changes as you scroll down (jQuery)

问题描述

TechCrunch最近重新设计了他们的网站，当您向下滚动时，它们具有漂亮的标题，可缩小为品牌的精简版.

TechCrunch recently redesigned their site and they have a sweet header that minifies into a thinner version of their branding as you scroll down.

您可以在这里看到我的意思: http://techcrunch.com/

You can see what I mean here: http://techcrunch.com/

我将如何创建这样的东西?到处都有教程，如果没有的话，您能不能给我一个关于从哪里开始的提示? :)

How would I go about creating something like this? Is there a tutorial anywhere and if not, can one you kind souls give me some tips on where to start? :)

推荐答案

这并不难，它只是一个简单的 .scroll() 事件. 由于面板的放置方式，我似乎无法摆弄 选中EDIT！.但是基本上，您拥有的是顶部的div为position: absolute，因此它始终位于顶部，然后使用.scroll()

It's not too hard, it's just a simple .scroll() event. I can't seem to do it in fiddle because of the way the panels are positioned Check EDIT!. But basically what you have is have a div on the top that is position: absolute so it's always on top, then use .scroll()

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

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

根据您想在何处更改标头div，您可以让if语句执行许多操作.就您提供的示例而言，它类似于

And depending on where you would like to change your header div, you can have your if statement do many things. In the case of the example you provided, it would be something like

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

编辑

是的！我能够制作这个小提琴来演示该示例！ :)

Yay! I was able to make this fiddle to demonstrate the example! :)

祝你好运！

这篇关于向下滚动时标题改变(jQuery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！