重新创建随页面滚动而移动的 Apple Store 摘要

【问题标题】：Recreating the Apple Store's summary that moves with the page scrolling重新创建随页面滚动而移动的 Apple Store 摘要
【发布时间】：2010-05-05 08:07:17
【问题描述】：

我希望创建类似于 Apple 在其在线商店中提供的内容，用于显示您的计算机摘要和总数 as seen here。我猜这是 JavaScript，但如果它可以在 CSS 中完成，那就更酷了。

基本上我想要像position:fixed 这样的页面滚动，但我不希望它在用户滚动超过某个位置之前开始移动。

我正在使用 jQuery，所以一个 jQuery 插件也将是完美的。

【问题讨论】：

标签： javascript slider

【解决方案1】：

试试这样的

var min = 10; //Set your own here
$(window).scroll(function() { 
  var scrollTop = $(window).scrollTop()
  if(scrollTop > min)
    $('.divClass').css({  top: "0" });
  else
    $('.divClass').css({ top: (min - scrollTop) + "px" });
});

CSS

.divClass
{
  position:fixed,
  left: 500px /* or whatever */
}

【讨论】：

不错。稍微调整一下就完美了！我将第一个顶部：“0”更改为顶部：“10px”，因此 div 和页面顶部之间有一点填充。我也不需要 left:500px;在 CSS 中（但我确实需要修复）。