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

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不能重复使用)。

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

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

赞(6)
未经允许不得转载:大前端 » jQuery 随滚动条滚动效果 (适用于内容页长文章)
分享到: 更多 (0)

评论 63

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

    Thanks for the help!

  2. #43

    Yangın kapısı denince akla ilk reddoor Yangın Çıkış Kapıları Gelmektedir. sizi web sitemize beklerim. Yangın Merdiveni Kapısı İstanbul Bahçelievler Yangın Çıkış Kapısı

  3. #42

    I believe that is among the most vital info for me. And i’m happy studying your article. However want to commentary on few basic issues, The web site style is ideal, the articles is actually excellent . Just right process, cheers.

  4. #41

    You are therefore cool! My partner and i do not assume I have learn anything like this prior to. So excellent to discover somebody with a few original thoughts on this subject matter. realy many thanks for beginning this up. this web site is something that’s needed on the web, someone using a bit of inspiration. beneficial project for delivering something a new comer to the internet!

    Ha Reckleben1周前 (05-16)回复
  5. #40

    This site is often a walk-through for all of the data it suited you with this and didn’t know who need to. Glimpse here, and you’ll definitely discover it.

    sprawdz tutaj1周前 (05-15)回复
  6. #39

    Thank you a lot for giving everyone remarkably superb opportunity to check tips from this website. It is often so superb plus stuffed with a great time for me and my office friends to visit your website at the least three times per week to find out the fresh things you have. And indeed, I’m so usually satisfied considering the mind-blowing opinions you give. Selected 1 ideas in this post are surely the most impressive I have ever had.

    yeezy shoes2周前 (05-13)回复
  7. #38

    I think other web site proprietors should take this web site as an model, very clean and wonderful user genial style and design, let alone the content. You

    Nonton Anime2周前 (05-11)回复
  8. #37

    This is the fitting weblog for anybody who desires to seek out out about this topic. You notice a lot its virtually arduous to argue with you (not that I really would want…HaHa). You undoubtedly put a new spin on a subject thats been written about for years. Nice stuff, just great!

    cat blog2周前 (05-09)回复
  9. #36

    There’s definately a lot to learn about this topic. I really like all of the points you have made.

    Apex Legends Season 12个月前 (03-31)回复
  10. #35

    Hey! I know this is kinda off topic but I’d figured I’d ask. Would you be interested in trading links or maybe guest writing a blog post or vice-versa? My blog addresses a lot of the same topics as yours and I believe we could greatly benefit from each other. If you happen to be interested feel free to shoot me an email. I look forward to hearing from you! Excellent blog by the way!

    my singing monsters2个月前 (03-28)回复
  11. #34

    I was also reading a topic like this one from another site.`’”:;

    Tonja Seba3个月前 (03-11)回复
  12. #33

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

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

    这个代码不错,简短实用

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

    怎么没有在线预览的?

    DGHGPG6年前 (2013-06-21)回复
  15. #30

    呵呵 个人中心怎么弄得呢

    lutao6年前 (2013-04-03)回复
  16. #29

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

    sure156年前 (2013-01-19)回复
  17. #28

    DIV里面是怎么调用

    HAI7年前 (2012-12-23)回复
  18. #27

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

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

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

        悠然7年前 (2012-12-14)回复
  19. #26

    看不到效果啊。。

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

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

    huigezi7年前 (2012-08-20)回复
  21. #24

    果断收藏啊,好东西

    FKBlog7年前 (2012-04-27)回复
  22. #23

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

    blueman7年前 (2012-02-06)回复
  23. #22

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

    aszx04137年前 (2012-02-03)回复
  24. #21

    既然如此,拨个毛吧…

    shirne8年前 (2011-12-06)回复
  25. #20

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

    skway8年前 (2011-10-20)回复
  26. #19

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

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

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

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

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

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

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

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

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

    饭饭8年前 (2011-08-24)回复
  29. #16

    不错,超强。学习了。

    John8年前 (2011-08-15)回复
  30. #15

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

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

      loosky8年前 (2011-08-14)回复
  31. #14

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

    倡萌8年前 (2011-08-13)回复
  32. #13

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

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

      浩子8年前 (2011-08-17)回复
  33. #12

    强大! :mrgreen:

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

      abc8年前 (2011-11-15)回复
  34. #11

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

    木木8年前 (2011-08-12)回复
  35. #10

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

    loosky8年前 (2011-08-12)回复
  36. #9

    好用,收下了。

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

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

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

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

    palese8年前 (2011-08-12)回复
  39. #6

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

    radom8年前 (2011-08-11)回复
  40. #5

    这个相当有用。

    loosky8年前 (2011-08-11)回复
  41. #4

    小东西不错。很实用。

    wmtimes8年前 (2011-08-11)回复
  42. #3

    效果不错!

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

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

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

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

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

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

立即前往