使用CSS在浏览器中滚动时更改标题的大小和内容

Question

知道如何制作这样的东西http://studiompls.com/case-studies/crown-maple/

标题变小,标识更改为不同的按钮.可以用CSS完成而无需编写任何JS吗？

干杯!

---

更新:

如果JS是必须的,你可以推荐学习的任何链接？谢谢.

Answer 1

易用jquery:

$(window).scroll(function(){
if($(window).scrollTop() >= $('.header').outerHeight()) {
// put content here for if the page has scrolled 200 pixels
}
});

确保你有一个js文件

Answer 2

你可以用jquery来做.这很容易.

这是一个演示:http://jsfiddle.net/jezzipin/JJ8Jc/

$(function(){
  $('#header_nav').data('size','big');
});

$(window).scroll(function(){
  if($(document).scrollTop() > 0)
{
    if($('#header_nav').data('size') == 'big')
    {
        $('#header_nav').data('size','small');
        $('#header_nav').stop().animate({
            height:'40px'
        },600);
    }
}
else
  {
    if($('#header_nav').data('size') == 'small')
      {
        $('#header_nav').data('size','big');
        $('#header_nav').stop().animate({
            height:'100px'
        },600);
      }  
  }
});