0

谷歌有一个优秀的博客，它有一个相当整洁的标题 - 当你向下滚动时，标题中的灰色条会向上移动，直到它在屏幕顶部停止（它也做了一些花哨的 z-index 技巧，但我我对那些不感兴趣）。

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

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

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

4

2 回答 2

0

对于 jQuery 解决方案，您将使用滚动事件来确定距顶部的偏移量并相应地调整 DOM 中的元素以“缩小”标题。

于 2012-08-03T17:36:46.690 回答
0

使用占位符复制他们的 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");
       });
   });​
于 2012-08-03T18:11:34.320 回答