你已經在Google代碼上看到了這個例子問題頁以及(直到最近)堆棧溢出的編輯頁面。
CMS的答案不會在你向上滾動時恢復定位。下面是堆棧溢出中無恥的被盜代碼:
function moveScroller() {
var $anchor = $("#scroller-anchor");
var $scroller = $('#scroller');
var move = function() {
var st = $(window).scrollTop();
var ot = $anchor.offset().top;
if(st > ot) {
$scroller.css({
position: "fixed",
top: "0px"
});
} else {
$scroller.css({
position: "relative",
top: ""
});
}
};
$(window).scroll(move);
move();}<div id="sidebar" style="width:270px;">
<div id="scroller-anchor"></div>
<div id="scroller" style="margin-top:10px; width:270px">
Scroller Scroller Scroller </div></div><script type="text/javascript">
$(function() {
moveScroller();
});</script>一個簡單的現場演示.
一個新的、沒有腳本的替代方案是position: sticky,它在Chrome、Firefox和Safari中得到了支持。見關于HTML 5巖石的文章和演示,和Mozilla博士.