关注前端开发
关注用户体验

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

直接入题!

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

好吧,昨天写了这个东西,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 随滚动条滚动效果 (适用于内容页长文章)
分享到:更多 ()

评论 52

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #33

    不错,正在找这个···谢谢了

    织梦模板小屋2年前 (2015-02-12)回复
  2. #32

    这个代码不错,简短实用

    柳飘清枫4年前 (2013-11-03)回复
  3. #31

    怎么没有在线预览的?

    DGHGPG4年前 (2013-06-21)回复
  4. #30

    呵呵 个人中心怎么弄得呢

    lutao4年前 (2013-04-03)回复
  5. #29

    你好,我从没学过jquery,请问如何在html调用这个函数?

    sure154年前 (2013-01-19)回复
  6. #28

    DIV里面是怎么调用

    HAI4年前 (2012-12-23)回复
  7. #27

    这段代码是放在哪里的?head.php文件的之间吗

    悠然4年前 (2012-12-10)回复
    • 这个是js,放到js文件或者footer.php

      浩子4年前 (2012-12-10)回复
      • 真心看不到效果

        悠然4年前 (2012-12-14)回复
  8. #26

    看不到效果啊。。

    没有时间5年前 (2012-11-16)回复
  9. #25

    没找到在哪下载例子啊 浩哥

    huigezi5年前 (2012-08-20)回复
  10. #24

    果断收藏啊,好东西

    FKBlog5年前 (2012-04-27)回复
  11. #23

    不知道代码应该怎么用.放在哪些地方?

    blueman5年前 (2012-02-06)回复
  12. #22

    现在这个功能已经撤消了么,怎么没看到效果。
    ie7

    aszx04135年前 (2012-02-03)回复
  13. #21

    既然如此,拨个毛吧…

    shirne5年前 (2011-12-06)回复
  14. #20

    这个用户体验很好!细节决定成败吖!
    pS:发现历史记录这个便签向上滚动了,360浏览器。

    skway6年前 (2011-10-20)回复
  15. #19

    热门标签 在ff下可能有点问题。慢慢的下拉滚动条看看

    向你学习6年前 (2011-09-14)回复
  16. #18

    这段代码应该放在哪个位置啊,我怎么放进去不起作用呢,能否提供一个例子参考下呢

    蝈蝈6年前 (2011-08-26)回复
    • 本站右侧就是例子

      浩子6年前 (2011-08-26)回复
      • 我按照这个写了一个简单的页面,class的名字都没动,可是不行呢,我从QQ上传给你能帮我看下么

        蝈蝈6年前 (2011-08-26)回复
        • 支持一下! 😛

          老下6年前 (2011-11-09)
      • Yes 😎

        abc6年前 (2011-11-11)回复
  17. #17

    这个效果太棒了, 很喜欢. 谢谢浩子!!

    饭饭6年前 (2011-08-24)回复
  18. #16

    不错,超强。学习了。

    John6年前 (2011-08-15)回复
  19. #15

    我也遇到无限下拉的问题了!不知道怎么搞额!

    蓝色离子6年前 (2011-08-13)回复
    • 滚动区域的长度不能太长,否则会出现无限下拉的bug。

      loosky6年前 (2011-08-14)回复
  20. #14

    没想到快要下网了,还能看到这么有价值的文章,呵呵,。有时间试试效果

    倡萌6年前 (2011-08-13)回复
  21. #13

    哎呀,好牛逼哦! :mrgreen: :mrgreen:

    滑触线6年前 (2011-08-13)回复
    • 哈哈,只是简单的运用jq

      浩子6年前 (2011-08-17)回复
  22. #12

    强大! :mrgreen:

    蓝色离子6年前 (2011-08-13)回复
    • 同意

      abc6年前 (2011-11-15)回复
  23. #11

    这个蛮有用,想拿来试试。 :mrgreen:

    木木6年前 (2011-08-12)回复
  24. #10

    按照这个代码,在我page页面上有一些问题,侧边栏可以一直往下滚动。文章页貌似没有问题,刚才看了你的page页面,也没有类似的问题,不知道什么原因呢?
    http://loosky.net/?page_id=1651 比如这个页面。

    loosky6年前 (2011-08-12)回复
  25. #9

    好用,收下了。

    夜色倾城6年前 (2011-08-12)回复
  26. #8

    好东西,能不能固定,要不然下拉时会有抖抖的感觉

    IM路人6年前 (2011-08-12)回复
  27. #7

    灰常喜欢,D4的进程加紧呀 😀

    palese6年前 (2011-08-12)回复
  28. #6

    忘记在哪也看到过这个效果了,是个灰常不错的体验。 😀

    radom6年前 (2011-08-11)回复
  29. #5

    这个相当有用。

    loosky6年前 (2011-08-11)回复
  30. #4

    小东西不错。很实用。

    wmtimes6年前 (2011-08-11)回复
  31. #3

    效果不错!

    半盏凉茶6年前 (2011-08-11)回复
  32. #2

    严重支持,这个用户体验不错!

    没啥说的!6年前 (2011-08-11)回复
  33. #1

    沙发 收下~~
    有空试试去~~ :mrgreen:

    iSayme6年前 (2011-08-11)回复

themebetter 国内更好的WordPress主题服务商

立即前往