Wordpress主题侧边栏随窗口滚动

  • A+
所属分类:WordPress
摘要

貌似这个特效目前很流行,之前也发过一篇《jQuery实现侧边栏随窗口滚动》的教程,不过有童鞋发现加上这个JS特效后,侧边栏会顶着页脚无限滚下去,那就在发一个比较完美的。 修改其中的“#sidebar”为你的主题侧边选择器名称;根据不同的主题头部模版高度,适当调整其中的数字“368”(默认数字为HotNews主题的)。 网页加上这个特效后,侧边模块在眼前晃晃悠悠的,并不是很舒服,适合内容较少的侧边栏或者侧边最下面的固定模块比如广告滚动。萝卜青菜各有所爱,大家接着折腾吧。

貌似这个特效目前很流行,之前也发过一篇《jQuery实现侧边栏随窗口滚动》的教程,不过有童鞋发现加上这个JS特效后,侧边栏会顶着页脚无限滚下去,那就再发一个比较完美的,上代码:

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

将上述javascript代码加到主题头部header.php模版中。

修改其中的#sidebar”为你的主题侧边选择器名称;

根据不同的主题头部模版高度,适当调整其中的数字368(默认数字为HotNews主题的)。

个人认为,网页加上这个特效后,侧边模块在眼前晃晃悠悠的,并不是很舒服,适合内容较少的侧边栏或者侧边最下面的固定模块比如广告滚动。萝卜青菜各有所爱,大家接着折腾吧。

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

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

目前评论:99   其中:访客  90   博主  5   引用   3

    • avatar 坏蛋盒子 0

      能让边栏固定跟随移动吗?

      • avatar celine outlet 1

        能让边栏固定跟随移

        • avatar 鲜活优惠码 3

          这个有点烦感觉

          • avatar mays1986 1

            一直在找这样的东西

            • avatar 厦门SEO 0

              看来想让博客变得更完美还得捣腾啊。努力实现各种特效。

              • avatar nurbilik 0

                使用header 怎么样改变 哪个代码呢??

                • avatar 古典道 0

                  主题侧边选择器名称是什么呢

                  • avatar inphon 0

                    这个不错,但是必须用到jquery.min.js
                    和一些必须用到jquery.js的插件冲突了fancy-box….

                    • avatar 苏苏网赚博客 2

                      终于找到了,多谢博主分享

                      • avatar 读书破万卷 0

                        此功能还算不错的,能够写成插件就好啦

                        • avatar 网赚博客 3

                          感谢知更鸟大师

                          • avatar 小麦粒 0

                            先试试才,借鉴借鉴下,请问博主是您现在侧边栏的这个效果吗?

                            • avatar 萨龙龙 4

                              文章中也说这个效果会晃晃悠悠的,但你的网站边栏随窗口就没有,请问什么原因?

                              • avatar 智享互联 3

                                能帮我看下我的想让 右侧五个图标跟随,为什么就是不能啊 好像id=text-4

                                • avatar 健身护具 0

                                  代码加进去,怎么不显示呢,是不是跟主题有关系呢。

                                  • avatar 番茄 2

                                    奇怪,我刚才博客添加这个代码之后却不显示,是不是侧边栏选择器的名称写错了呢,继续折腾当中……………

                                    • avatar 深圳SEO 0

                                      这样弄岂不是和HTML5的性质有点类似了? 不过貌似不利于SEO优化。

                                      • avatar 古意人 2

                                        【主题侧边选择器名称】是什么东西,用firebug找半天没找到……

                                        • avatar crazy 0

                                          我用了这个代码,发现是慢腾腾的下来,并不是你网站的这种效果,请博主看看

                                          • avatar 爱美护肤网 0

                                            :mrgreen: 不错奥

                                            • avatar 深蓝 0

                                              请问能不能更新下,你现在的这个边栏是怎样实现的吗?谢谢

                                                • avatar 跨境电商平台 2

                                                  @深蓝 非常不错!!!!
                                                  (299元这个广告的边栏)先固定不动,然后在拉下来的时候显现。
                                                  同求现在这个侧边栏是怎么实现的?

                                                • avatar 木易杨 0

                                                  这个代码还是会顶着底部滚动的,不可以到某个位置停止滚动吗?

                                                • 来自外部的引用: 3

                                                  • Wordpress 侧边栏实现随滚动条滑动固定的效果 | 觉唯前端
                                                  • WORDPRESS 侧边栏实现随滚动条滑动固定的效果 | 592WP-我就爱wordpress
                                                  • » WORDPRESS 侧边栏实现随滚动条滑动固定的效果 月光宝盒-关注互联网