10
5
2011
0

jQuery实现侧边栏滚动(摘自网络

摘自:JQuery侧边栏滚动

$(function() {
 //取得所要滚动的侧边栏
 var $sidebar = $("#text-3"),

 //取得窗口对象
 $window = $(window),

 //获取元素在当前视口的相对偏移。
//主要是为获得top值,以便计算是不需要偏移
 offset = $sidebar.offset(),

 //定义默认的一个间距值,即滚动后距窗口边缘的距离
 topPadding = 15;

 //添加窗口滚动事件的方法
 $window.scroll(function() {
   //获取window相对滚动条顶部的偏移,然后与元素的top进行比较
  //如果元素的top值小的话,说明元素需要移动!
  if ($window.scrollTop() > offset.top) {
   $sidebar.stop().animate( //先停止所有动画,然后改变元素的margin-top值
      //先减去top值,然后加上自定义的边距。
    {marginTop: $window.scrollTop() - offset.top + topPadding}
   );
  } else { //否则,先停止动画,并将margin-top置0,即不需要下移了
    $sidebar.stop().animate({
     marginTop: 0
    });
  }
 });
});

PS:发现类似的代码都存在一个小bug,如果侧边栏的高度大于浏览器的高度(即浏览器不能完全显示侧边栏的话),那么滚动条是一直存在的,那么就可以一直一直的滚下去的…… 当然既然显示不全就应该可以滚下去,但这样的情况太特殊了呢。(我认为应该计算,滚动到一定的长度后就无须再滚了,因为下面没有其它的内容了,除了侧边栏未显示的内容而已)

Category: Web摘记 | Tags: jquery | Read Count: 1922

登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter

Host by is-Programmer.com | Power by Chito 1.3.3 beta | Theme: Aeros 2.0 by TheBuckmaker.com