• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

jQuery 随滚动条滚动效果 (适用于内容页长文章)

JavaScript web前端中文站 2年前 (2017-05-03) 950次浏览 已收录 0个评论

直接入题!

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

当内容页比较长的时候,网站右侧一直是空白,不如放点有用的东西给用户看,最好不要放广告,因为那样很邪恶,你懂的。

好吧,昨天写了这个东西,jQuery 滚动随动区块,代码如下:

//侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动  rollOut = $('.cookie-list'); //隐藏 rollStart 之后的区块  rollStart.before('<div class="da_rollbox"></div>');  var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev(),  rollSet = $('.search,.weibo,.group'); //添加 rollStart 之前的随动区块  objWindow.scroll(function() {  if (objWindow.scrollTop() > offset.top){   if(rollBox.html(null)){    rollSet.clone().prependTo('.da_rollbox');   }   rollOut.fadeOut();   rollBox.show().stop().animate({marginTop: objWindow.scrollTop() - offset.top + 20},400);  } else {   rollOut.fadeIn();   rollBox.hide().stop().animate({marginTop:0},400);  } });

码中已有完整注释,只需要写上几个 class 或者 id(最好不要是 id,w3c 规定 id 不能重复使用)。

如还有不明白的地方,留言!

下面是大前端设置的随动区块,还实用吧!!

jQuery 随滚动条滚动效果 (适用于内容页长文章)

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:jQuery 随滚动条滚动效果 (适用于内容页长文章)
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址