滚动/跟随侧边栏，多种技术

今天真的很简单的概念，朋友们！一个在您向下滚动页面时“跟随”的侧边栏。有很多方法可以实现它。我们将介绍两种：CSS 和 JavaScript（jQuery），以及一个额外的 CSS 技巧。

查看演示   下载文件

CSS

处理这个问题最简单的方法就是使用 CSS 固定定位。我们的侧边栏位于一个具有相对定位的 #page-wrap div 内，所以侧边栏将在那里设置，然后我们只需使用边距将其推到合适的位置。

#page-wrap { 
  width: 600px; 
  margin: 15px auto; 
  position: relative; 
}

#sidebar { 
  width: 190px; 
  position: fixed; 
  margin-left: 410px; 
}

使用这种技术，侧边栏在您向下滚动页面时会始终保持在适当的位置。

jQuery

如果我们使用 JavaScript，我们可以测量窗口滚动事件后用户滚动到窗口下方的距离。如果该距离大于侧边栏的起始顶部位置，我们可以调整侧边栏的顶部边距，将其推入可见范围内。

优化 由 Doug Neiner

$(function() {

    var $sidebar   = $("#sidebar"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
    
});

这里没有特别的优势，除了我们得到的酷炫动画效果，这肯定会引起人们的注意。

额外“显示”技巧

在 Tim Van Damme 的 Maxvoltar.com 网站上，每篇博客文章都有一个特殊的侧边栏，在向下滚动页面时会显示一个有趣的“显示”效果。

诀窍是让一个具有纯色背景的标题区域位于侧边栏的顶部，并将侧边栏拉到标题区域的下方。您可以使用负顶部边距来实现，或者调整top定位值。然后，将一张透明度设置为 alpha 的白色渐变图像小心地放置在侧边栏的顶部，并将它设置在侧边栏之上。因此，当被标题隐藏的侧边栏顶部向下滑动进入视图时，白色渐变图像就会“显示”它。

/* Negative top margin on sidebar pulls up header under title-area */
#sidebar { 
  width: 190px; 
  position: fixed; 
  margin: -135px 0 0 410px; 
}

/* Title area kept above all with z-index */
#title-area { 
  background: white; 
  position: relative; 
  z-index: 3000; 
}

/* white-fade image */
#reveal { 
  position: absolute; 
  right: 0; 
  bottom: -20px; 
}

问题

在所有这些技术中，我们实际上都在处理固定定位。固定定位“真实”内容（例如，与背景图像相反）是一个略微危险的领域。我们需要非常确定，我们进行固定定位的内容永远不会比即使是最小的显示器的可视区域更高。如果高度超过该可见区域，它将被完全隐藏和无法访问，超出浏览器窗口的边缘。对于非固定定位的元素，该悬垂部分将触发滚动条，而固定定位的元素则不会。

跨浏览器问题

这应该在“所有”浏览器中都能正常工作。对于 IE 6 和 IE 7，我添加了一些条件注释，以提供一些额外的 CSS 来使其正常运行。您可以随意查看演示中的源代码以了解详情。这是一个 不错的演示，可以作为 IE 6 中固定定位的参考（基本上，您需要在页面的外部包装一个额外的外层包装，并使用绝对定位来模拟固定定位）。

MooTools

David Walsh 在 滚动侧边栏 中介绍了 MooTools 版本。

jQuery 插件

存储库中还有一个 jQuery 插件可以实现相同的功能，并附带一个额外的酷炫功能，它会在接触页脚之前停止。

该链接现在已失效，但这里有一个 jQuery 插件汇总，它们执行相同类型的操作。