jQuery实现侧边栏随窗口滚动

知更鸟
知更鸟
站长
2322
文章
0
粉丝
WordPress7623,698阅读模式
摘要近日帮人作主题要求弄个侧边栏某个模块随窗口一起滚动，可能其它童鞋也想给主题加上这个小功能，贴出来，供大家参考。 方法很简单，前提是你的主题必须已加载了jQuery。把下面代码加到主...

近日帮人作主题要求弄个侧边栏某个模块随窗口一起滚动，可能其他童鞋也想给主题加上这个小功能，贴出来，供大家参考。

方法一：

很简单，前提是你的主题必须已加载了jQuery。

把下面代码加到主题头部header.php模版中即可：

  1. <script type="text/javascript">   
  2. $(function() {
  3.     var $sidebar   = $("#sidebar"),   
  4.         $window    = $(window),   
  5.         offset     = $sidebar.offset(),   
  6.         topPadding = 15;   
  7.   
  8.     $window.scroll(function() {   
  9.         if ($window.scrollTop() > offset.top) {   
  10.             $sidebar.stop().animate({   
  11.                 marginTop: $window.scrollTop() - offset.top + topPadding   
  12.             });   
  13.         } else {   
  14.             $sidebar.stop().animate({   
  15.                 marginTop: 0   
  16.             });   
  17.         }   
  18.     });   
  19.   
  20. });   
  21. </script>  

可根据不同的主题模版，自行修改一下其中的DIV标签#sidebar名称。此方法兼容所有浏览器。

演示效果

HotNews主题也可使用该功能，默认是整个侧边栏随窗口滚动，受主题布局功能限制，单独滚动某个模块效果不是很理想。

参考自：http://css-tricks.com/scrollfollow-sidebar/

方法二：

本人未试过，可以自行参阅：js页面滚动时层智能浮动定位实现

  1. $.fn.smartFloat = function() {  
  2.     var position = function(element) {  
  3.         var top = element.position().top, pos = element.css("position");  
  4.         $(window).scroll(function() {  
  5.             var scrolls = $(this).scrollTop();  
  6.             if (scrolls > top) {  
  7.                 if (window.XMLHttpRequest) {  
  8.                     element.css({  
  9.                         position: "fixed",  
  10.                         top: 0  
  11.                     });      
  12.                 } else {  
  13.                     element.css({  
  14.                         top: scrolls  
  15.                     });      
  16.                 }  
  17.             }else {  
  18.                 element.css({  
  19.                     position: "absolute",  
  20.                     top: top  
  21.                 });      
  22.             }  
  23.         });  
  24.     };  
  25.     return $(this).each(function() {  
  26.         position($(this));                           
  27.     });  
  28. };  
  29. $("#float").smartFloat();  

 

本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！

为网站添加实时天气
为网站添加实时天气
WordPress 6.7会造成主题和插件语言加载失效
禁用WordPress更新提示
禁用WordPress更新提示
网站病毒在线检测工具：VirusTotal
weinxin
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
 
知更鸟
  • JQuery
  • WordPress
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
评论  76  访客  61  作者  5
    • 软件盒子
      软件盒子 2
      浙江省台州市 1F
      回复

      原创出于这里啊，厉害的知更鸟

      • Tmd
        Tmd 5
        福建省厦门市 2F
        回复

        这个是个好东西

        • 户外用品
          户外用品 1
          浙江省宁波市 3F
          回复

          简单的几行代码，就实现了效果，值得学习啊。

          • Amoy厦门
            Amoy厦门 4
            福建省厦门市 4F
            回复

            请问怎么修改主题的ico图标啊？你的很多说明你都没有。找不到解决方法。

              • blueman
                blueman 4
                江苏省徐州市 B1
                回复

                @ Amoy厦门 HotNewspro.zipimagesfavicon.ico
                这个图标就是主题图标.
                用你自己的图标替换即可.

                  • Amoy厦门
                    Amoy厦门 4
                    福建省厦门市 B2
                    回复

                    @ blueman 成功了。谢谢哈···

                      • blueman
                        blueman 4
                        江苏省徐州市 B3
                        回复

                        @ Amoy厦门 不客气哈.我知道的不多,刚好知道.

                          • 玖零博客
                            玖零博客 0
                            重庆市 B4
                            回复

                            @ blueman 多级嵌套回复。。。

                              • 以諾
                                以諾 3
                                四川省成都市 B5

                                @ 玖零博客 在来一级

                                • sss
                                  sss 1
                                  北京市 B5

                                  @ 以諾 还可以嵌吗？

                                  • 1212
                                    1212 0
                                    广西 B5

                                    @ sss 1111111111

                                    • 阳光互联网博客
                                      阳光互联网博客 2
                                      新疆乌鲁木齐市 B5

                                      @ 1212 我只是来盖楼的！！！

                                      • 社会主义等不来
                                        社会主义等不来 0
                                        北京市 B5

                                        @ 阳光互联网博客 添砖加瓦，更上一层楼！

                              • 老人头
                                老人头 0
                                江苏省镇江市 5F
                                回复

                                不弄了，弄到最后弄不回去了

                                • 永恒之塔基地
                                  永恒之塔基地 3
                                  四川省成都市 6F
                                  回复

                                  这段是个好东西啊。

                                  • 一堵墙
                                    一堵墙 4
                                    云南省昆明市 7F
                                    回复

                                    和我看的地方居然是一样的

                                    • 北京燕竹医院
                                      北京燕竹医院 1
                                      北京市 8F
                                      回复

                                      请问那东西难弄吗？

                                      • 小z
                                        小z 4
                                        四川省成都市 9F
                                        回复

                                        鸟哥您好！安装了一个主题后台没有您这个关键词和描述的设置！不太懂代码！好像可以用插件代替！您推荐一个好的插件呗！或者直接写在头部文件里！直接写在头部文件里有什么影响呢？您把描述和关键词的代码写给我一下吧！谢谢！

                                        • 低压电容器
                                          低压电容器 4
                                          浙江省温州市 10F
                                          回复

                                          这个确实不错。等下把我的博客也加上。

                                          • bluehost
                                            bluehost 4
                                            江苏省徐州市 11F
                                            回复

                                            (a) href=”http://zmingcx.com/category/hotnewspor” title=”HotNews主题” (/a)

                                            请问 上面的TITLE 的内容,不想在右下角显示, 而是随鼠标的位置显示,应该在哪个文件中更改?

                                            • 80后Tim博客
                                              80后Tim博客 1
                                              江西省鹰潭市 12F
                                              回复

                                              成功了！嘎嘎，谢谢！

                                              • 管理教程
                                                管理教程 4
                                                广东省东莞市 13F
                                                回复

                                                鸟哥，又来叨扰您了，我网站的最新评论貌似没动静了，有新回复，可还是没有更新，一直都是旧的回复评论，不知道问题出在哪里，拜请帮忙看看，谢谢http://www.5u1314.com/

                                                • 游戏大牛
                                                  游戏大牛 2
                                                  湖南省 14F
                                                  回复

                                                  我头像呢…

                                                  • 科普巴士
                                                    科普巴士 6
                                                    澳门 15F
                                                    回复

                                                    想请教下鸟哥我现在用的那个“评论啦插件”应该怎么跟主题融合才能显示文章什么的评论次数？

                                                    • 网店货源
                                                      网店货源 2
                                                      广东省广州市天河区 16F
                                                      回复

                                                      怎么才能在你这里留下言呢

                                                      • 灰指甲的治疗方法
                                                        灰指甲的治疗方法 3
                                                        河北省石家庄市 17F
                                                        回复

                                                        随窗口滚动

                                                        • Win7en乐园
                                                          Win7en乐园 5
                                                          河南省信阳市固始县 18F
                                                          回复

                                                          呵呵，能滚动一部分就好啦！呵呵

                                                          • 面膜排行榜
                                                            面膜排行榜 1
                                                            上海市 19F
                                                            回复

                                                            博主的博客很喜欢，支持一个了！同时祝各位网友龙年吉祥、平安

                                                            • Amoy厦门
                                                              Amoy厦门 4
                                                              福建省厦门市 20F
                                                              回复

                                                              注册时写着：密码将通过电子邮件发送给您。

                                                              但是却一直不会发邮件。知道怎么处理吗？
                                                              回复评论倒是可以收到邮件。

                                                                • 常喜
                                                                  常喜 1
                                                                  北京市 B1
                                                                  回复

                                                                  @ Amoy厦门 请问你如何解决的？？？我也有此问题

                                                                    • Amoy厦门
                                                                      Amoy厦门 4
                                                                      福建省厦门市 B2
                                                                      回复

                                                                      @ 常喜 直接让他显示出密码啊。不用邮件发送。哈哈···http://www.bukunu.net/blog/?p=758
                                                                      我百度到这个人的

                                                                  • Amoy厦门
                                                                    Amoy厦门 4
                                                                    福建省厦门市 21F
                                                                    回复

                                                                    已经解决了。吼吼···

                                                                    • 妖妖小精
                                                                      妖妖小精 0
                                                                      四川省成都市 22F
                                                                      回复

                                                                      很好很强大。哈哈·用了。。。

                                                                      • 女包
                                                                        女包 4
                                                                        江苏省南京市 23F
                                                                        回复

                                                                        鸟哥，这个第三名是你么 http://www.seowhy.com/u/zhuweikun/4536.html

                                                                          • 知更鸟
                                                                            知更鸟
                                                                            中国 B1
                                                                            回复

                                                                            @ 女包 呵呵
                                                                            我网名知更鸟，robin只用在主题的页脚上
                                                                            本人对SEO一窍不通，也非常抵制一些所谓SEO人士

                                                                              • Bob
                                                                                Bob 5
                                                                                浙江省杭州市 B2
                                                                                回复

                                                                                @ 知更鸟 鸟哥威武！

                                                                                • 末鱼
                                                                                  末鱼 2
                                                                                  甘肃省兰州市 B2
                                                                                  回复

                                                                                  @ 知更鸟 此人言谈举止谦和之中充满霸气，文武全才，凭借一手降龙十八掌在当今网坛叱咤风云，掌风一出，谁与争锋！

                                                                              • zoe
                                                                                zoe 0
                                                                                山东省 24F
                                                                                回复

                                                                                用上了。很赞。。

                                                                                • 莫小丁
                                                                                  莫小丁 0
                                                                                  上海市嘉定区 25F
                                                                                  回复

                                                                                  能否请教一下，固定于你网页底部的黑色条是如何实现的，可否告知，感激。

                                                                                    • 知更鸟
                                                                                      知更鸟
                                                                                      中国 B1
                                                                                      回复

                                                                                      @ 莫小丁 如果会DIV+CSS不用教，你也能作，否则….

                                                                                      可以自己下载我用的主题自己研究一下了

                                                                                    • 中尉咯咯
                                                                                      中尉咯咯 0
                                                                                      福建省福州市 26F
                                                                                      回复

                                                                                      我觉得，你引用的那个网址里面的那个些例子好一些。你用了animate，会不断抽搐，原例子使用absolute定位，不会抖动。

                                                                                        • WordPress网站优化之家
                                                                                          WordPress网站优化之家 1
                                                                                          湖北省武汉市 B1
                                                                                          回复

                                                                                          @ 中尉咯咯 是的哦，如果浮动的模块高度超过一定范围就会不断抽搐，使用这种方法最好控制一下浮动模块的高度。

                                                                                        • Fluky Loser oO
                                                                                          Fluky Loser oO 5
                                                                                          河南省信阳市固始县 27F
                                                                                          回复

                                                                                          已经添加了！

                                                                                          • WordPress网站优化之家
                                                                                            WordPress网站优化之家 1
                                                                                            湖北省武汉市 28F
                                                                                            回复

                                                                                            简单实用，不错。不过我的主题加载了WordPress3.0自带的jquery库，完全照搬代码是不行的，不然就跟我的下拉菜单冲突了。有木有跟我一样问题的童鞋？解决方法在我的博客里有介绍哦~http://www.wpohome.com/wonderful-recommendation/2012/0214/457.html

                                                                                            • 影评
                                                                                              影评 1
                                                                                              广东省深圳市 29F
                                                                                              回复

                                                                                              好像用css也可以实现这样的浮动吧？

                                                                                              • 电脑租赁
                                                                                                电脑租赁 3
                                                                                                上海市 30F
                                                                                                回复

                                                                                                主题头部header.php模版 找了半天都没找到，悲剧

                                                                                                • 蛋炒饭
                                                                                                  蛋炒饭 1
                                                                                                  山东省 31F
                                                                                                  回复

                                                                                                  标题的字数如何设个限制

                                                                                                  • tetsu
                                                                                                    tetsu 1
                                                                                                    陕西省西安市 32F
                                                                                                    回复

                                                                                                    觉得不滚动就挺好的，没太大必要去滚动

                                                                                                    • 志慧
                                                                                                      志慧 1
                                                                                                      江苏省苏州市 33F
                                                                                                      回复

                                                                                                      鸟哥啊~以前行的怎么突然不行了？我没动什么东西啊~

                                                                                                      • 72008
                                                                                                        72008 0
                                                                                                        广东省 34F
                                                                                                        回复

                                                                                                        找了好久 终于

                                                                                                        • 返钱网
                                                                                                          返钱网 0
                                                                                                          广东省深圳市 35F
                                                                                                          回复

                                                                                                          博客皮肤不错，哪里有下载啊

                                                                                                          • yong718100
                                                                                                            yong718100 0
                                                                                                            陕西省西安市 36F
                                                                                                            回复

                                                                                                            请问：
                                                                                                            楼主你的右侧那个是什么插件？
                                                                                                            就是“返回顶部”、“查看留言”、“转动底部”那个插件。

                                                                                                              • 知更鸟
                                                                                                                知更鸟
                                                                                                                中国 B1
                                                                                                                回复

                                                                                                                @ yong718100 主题集成非插件
                                                                                                                可以参考一下
                                                                                                                http://zmingcx.com/wordpress-template-for-the-scroll-button-to-add-a-fixed.html

                                                                                                              • 肝癌晚期治疗方法
                                                                                                                肝癌晚期治疗方法 1
                                                                                                                河北省石家庄市 37F
                                                                                                                回复

                                                                                                                肺癌晚期能活多久

                                                                                                                • 得失网
                                                                                                                  得失网 0
                                                                                                                  云南省曲靖市宣威市 38F
                                                                                                                  回复

                                                                                                                  嗯，这个功能很实用，想搬到我的ASP网站上试一下。但愿有效1

                                                                                                                  • 求教
                                                                                                                    求教 2
                                                                                                                    江西省九江市 39F
                                                                                                                    回复

                                                                                                                    这个能限制高度么？第一个代码 加上去会无止境下滑。。导致只能限制部分侧边栏，下面的显示不出来。因为下拉 就跟着下拉。。。

                                                                                                                    • sun
                                                                                                                      sun 2
                                                                                                                      浙江省温州市 40F
                                                                                                                      回复

                                                                                                                      碉堡了。！

                                                                                                                      • 内涵图
                                                                                                                        内涵图 0
                                                                                                                        河南省郑州市 41F
                                                                                                                        回复

                                                                                                                        方法不错 实验下

                                                                                                                        • doghap
                                                                                                                          doghap 1
                                                                                                                          吉林省长春市 42F
                                                                                                                          回复

                                                                                                                          我用了这一段代码,但是有个问题: 页面滑倒页脚时还是能滑动,我想侧边栏到页脚的元素那里就停止滑动的,这个能解决吗??

                                                                                                                            • hbbb
                                                                                                                              hbbb 0
                                                                                                                              意大利 B1
                                                                                                                              回复

                                                                                                                              @ doghap 同问。。。。

                                                                                                                            • 围挡
                                                                                                                              围挡 4
                                                                                                                              广东省广州市 43F
                                                                                                                              回复

                                                                                                                              两个都反复试了，怎么我的实现不了的啊。

                                                                                                                              • 番茄
                                                                                                                                番茄 2
                                                                                                                                湖北省武汉市 44F
                                                                                                                                回复

                                                                                                                                你的点赞的效果不错，有这代码或者插件吗？

                                                                                                                              匿名

                                                                                                                              发表评论

                                                                                                                              匿名网友
                                                                                                                              :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                                                                                                                              拖动滑块以完成验证