至于具体的css，请自己按照需要设定吧。

良久没写过代码分享文章了。这里先说一下体例：获取元素（这里定位元素A）距离顶部的高度，接着设定scroll滚动的事务，好比跨越阿谁高度，把A的位置设定为fixed，小于该高度，改削回relative。这里借zww年夜叔个图，如下（当然年夜叔不是这么弄的，不外效不美观近似）：

  if (jQuery(this).scrollTop() >= scroller_anchor && jQuery('.scroller').css('position') != 'fixed') {

下面是代码。

var scroller_anchor = jQuery(".scroller").offset().top;
   jQuery('.scroller').css({
</div>

   });
    'position': 'fixed',
   jQuery("#scroller_anchor").css('height', '0px');
    'margin-top': '0'
  } else if (jQuery(this).scrollTop() < scroller_anchor && jQuery('.scroller').css('position') != 'relative') {
    'margin-top': '10px',
jQuery(window).scroll(function() {
  }
   });
});
 }

可是，有时辰这样的体例会有问题，好比元素A膳缦沔有动态增添（缩短）的元素（好比俄然js写入了一个东东），这样第一次获取的高度就不再合适。这样就需要设定一个锚点（这里设定为class id为scroller_anchor的div元素）（经zww年夜叔提醒将class改为ID）。代码如下：

jQuery(window).scroll(function() {
   jQuery(".scroller").css({
  var scroller_anchor = jQuery("#scroller_anchor").offset().top;
  if (jQuery(this).scrollTop() >= scroller_anchor && jQuery('.scroller').css('position') != 'fixed') {
   jQuery(".scroller").css({
   jQuery('.scroller').css({
    'margin-top': '0'
 if(jQuery("#content").find("#scroller_anchor").length > 0){
   });
  jQuery("#scroller_anchor").css('height', '36px');
  } else if (jQuery(this).scrollTop() < scroller_anchor && jQuery('.scroller').css('position') != 'relative') {
    'position': 'fixed',
    'margin-top': '10px',

问题斗劲让人费解，概略效不美观就是此刻越来越多的看到网站里添加的随页面滚动的模块。好比我这里的托目就是，当然有时辰，效不美观会更好一些，好比一般时辰固定在某处，页面滚动使这个元素滚出显示鸿沟之后，为了便利读者（或者展示广告），就把这个模块酿成随页面滚动的。测试了一下效不美观还不错（当然IE6去死）。

    'position': 'relative'
    'position': 'relative'
   });
  }
  ......
});

膳缦沔用到的完整的html代码如下：

<div id="main-content">
 <div class="scroller">
 </div>
 <div id="scroller_anchor" style="height: 0px; "></div>

文章来历：Axiu’s blog