javascript - 在我的页面中获得类似 Google 博客的滚动标题的优雅方法是什么？

Question

Google 拥有出色的 blog它有一个相当整洁的标题——当你向下滚动时，标题中的灰色条向上移动，直到它在屏幕顶部时停止(它也做了一些花哨的 z-index 技巧，但我对那些不感兴趣).

虽然我知道 CSS 的 position:fixed，但 Google 似乎所做的是根据垂直滚动条的当前位置组合 position:fixed 和 position:relative。我想我可以使用滚动事件、花哨的数学和一些困惑的脚本 jQuery/CSS 来复制这种行为，但我想知道是否有更干净、优雅的第三方解决方案来做到这一点，而不是重新发明轮子，第一次可能行得通，也可能行不通。

在我的网页中获取 Google 博客样式 header 的最简洁方法是什么，最好使用 CSS2 和 jQuery 以实现 x 浏览器兼容性？

编辑 - 如果有一种方法不需要为要滚动的元素上方的元素指定高度，则加分。

Answer 1

用占位符复制他们的 css(或多或少)，然后使用一些简单的 javascript 产生非常流畅的效果。

参见 http://jsfiddle.net/n9yPH/31/

使用的Jquery是这样的:

$(function()
   {
       var start = $("#second").offset().top;
       $(window).scroll(function(e){
           var top = $("body").scrollTop();
           if (start-top >=0) $("#second").css("top",(start-top)+"px");
           else $("#second").css("top","0px");
       });
   });​