WordPress主题侧边栏随窗口滚动

知更鸟 WordPress9919.3K阅读模式
摘要

貌似这个特效目前很流行,之前也发过一篇《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模版中。文章源自知更鸟-https://zmingcx.com/wordpress-the-the-sidebar-scroll-with-window.html

修改其中的#sidebar”为你的主题侧边选择器名称;文章源自知更鸟-https://zmingcx.com/wordpress-the-the-sidebar-scroll-with-window.html

根据不同的主题头部模版高度,适当调整其中的数字368(默认数字为HotNews主题的)。文章源自知更鸟-https://zmingcx.com/wordpress-the-the-sidebar-scroll-with-window.html

个人认为,网页加上这个特效后,侧边模块在眼前晃晃悠悠的,并不是很舒服,适合内容较少的侧边栏或者侧边最下面的固定模块比如广告滚动。萝卜青菜各有所爱,大家接着折腾吧。文章源自知更鸟-https://zmingcx.com/wordpress-the-the-sidebar-scroll-with-window.html 文章源自知更鸟-https://zmingcx.com/wordpress-the-the-sidebar-scroll-with-window.html

weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
评论  99  访客  90  作者  5  引用  4
    • 眼幕微启
      眼幕微启 5

      呵呵,第一次沙发,鸟哥好久没更新了

      • 眼幕微启
        眼幕微启 5

        移到顶部有错位

          • 知更鸟
            知更鸟

            @ 眼幕微启 呵呵,刚刚我只是在测试而已,很完美的滚动特效
            最近业余时间较少,没时间折腾了

          • 倡萌
            倡萌 2

            有一个版本的不会晃 是固定的

              • 不能吧
                不能吧 4

                @ 倡萌 请教一下 不会晃的版本在哪里有啊 一直想要那个效果

                • 趣味网
                  趣味网 4

                  @ 倡萌 同求….

                  • 变了浮动
                    变了浮动 0

                    @ 倡萌 我用的你提供的办法,不过,加载图片广告没事,加载动态广告时总是不断重新加载,不知道是哪里出了问题,还望指教。

                  • 中文IT资讯站
                    中文IT资讯站 3

                    如何实现瀑布效果?

                    • 开溜网
                      开溜网 0

                      http://kailiwuang.net
                      麻烦鸟哥去看看啊,为什么我的视频 图片标签打开的页面总是错位的呢??
                      怎么解决啊 ??
                      还有就是首页视频横向滚动去掉下面的标题后,高度变小一点?
                      谢谢

                      • 一堵墙
                        一堵墙 4

                        哇塞,等的就是是这个啦

                        • 一堵墙
                          一堵墙 4

                          还是原来的好,虽然有BUG

                          • 刘印博客
                            刘印博客 2

                            不喜欢这样的效果。 呵呵

                            • 柏卡姿怎么样
                              柏卡姿怎么样 1

                              回头测试一下,看看到底好不好用。

                              • 乔莎眼霜怎么样
                                乔莎眼霜怎么样 1

                                很不错的效果。

                                • 流行女包
                                  流行女包 0

                                  刚在主题上试了下,效果还不错的,谢谢了

                                  • 猫理会会长
                                    猫理会会长 2

                                    多谢鸟哥,但是用了这个新代码后,还是不行,依旧底部页面无限往下顶,368这个数字我也改了,改成0,100,200,500,900都不行。。。
                                    ps:wopus的追问功能貌似无效了。。

                                      • 龙笑天
                                        龙笑天 0

                                        @ 猫理会会长 我也是啊,还是会无限下顶!!!怎么让他滑到某一div时停止滑动呢?

                                      • 广州搬家公司
                                        广州搬家公司 1

                                        不错,多谢分享。

                                        • 广州装修
                                          广州装修 1

                                          呵呵,过来踩踩。

                                          • 软件盒子
                                            软件盒子 2

                                            有时这功能必不可少

                                            • 口水客
                                              口水客 0

                                              这个代码比较好 多谢啦

                                              • 骷髅猫
                                                骷髅猫 5

                                                鸟哥,侧边栏的那个最活跃读者是按评论数量从高往低排列的对吧,这个怎么改一下以名字和数量排列啊?现在是头像排列的。我找了sidebar没有看到哦。谢谢了

                                                • Win7en乐园
                                                  Win7en乐园 8

                                                  这个不太需要了了,哎!一直没有弄成功过~~

                                                  • 三水
                                                    三水 3

                                                    问一个问题,为什么图片不能显示呢

                                                    • 骷髅猫
                                                      骷髅猫 5

                                                      鸟哥啊,我的内页侧边栏小工具为何显示不了呢。拖了好几个工具到全部页面里。死活就是不显示的。。

                                                      • hello
                                                        hello 2

                                                        wordpress如何用自定义栏目为文章添加缩略图?

                                                        鸟哥你好,请教个问题啊,我用的是鸟哥的模板,在模板说明到缩略图时有这么一条:“添加自定义栏目,调用指定的图片,推荐此方法。”
                                                        我想问
                                                        1.如何添加自定义栏目?
                                                        2.这种方法怎么用?怎么操作才能调用到图片?

                                                        知道的朋友也可以告诉下我啊,谢谢了!!

                                                          • 知更鸟
                                                            知更鸟

                                                            @ hello 主题使用说明中已写

                                                              • hello
                                                                hello 2

                                                                @ 知更鸟 那个 “添加自定义栏目,好像控制面板没有这个选项啊,后台在哪里操作啊?

                                                                  • 孤风
                                                                    孤风 1

                                                                    @ hello 后台写文章那里,右上角有个显示选项,点它,勾选自定义栏目后,在编辑区域下面就有了!

                                                                      • hello
                                                                        hello 2

                                                                        @ 孤风 这个值填什么呢?比如说我想指定的文章对应固定的图片,不要让图片随即的显示,怎么操作呢?谢谢

                                                                • hello
                                                                  hello 2

                                                                  还有那个 底部那个小喇叭 的微博 和订阅在哪里改动成自己的呢?

                                                                  • wmtimes
                                                                    wmtimes 7

                                                                    效果不错。很久没来了。你更新的也慢了啊。

                                                                    • 45454546
                                                                      45454546 0

                                                                      哈哈哈哈哈

                                                                        • hello
                                                                          hello 2

                                                                          @ 45454546 请教个问题啊,我用的是鸟哥的模板,在模板说明到缩略图时有这么一条:“添加自定义栏目,调用指定的图片,推荐此方法。”
                                                                          我想问
                                                                          1.如何添加自定义栏目?
                                                                          2.这种方法怎么用?怎么操作才能调用到图片?
                                                                          知道的朋友也可以告诉下我啊,谢谢了!!
                                                                          自定义栏目添加中,这个值填什么呢?比如说我想指定的文章对应固定的图片,不要让图片随即的显示,怎么操作呢?谢谢

                                                                        • Win7en乐园
                                                                          Win7en乐园 8

                                                                          鸟哥,PR更新了

                                                                            • Tmd
                                                                              Tmd 5

                                                                              @ Win7en乐园 PR5了,你的4了

                                                                                • Win7en乐园
                                                                                  Win7en乐园 8

                                                                                  @ Tmd 嗯,是呀,不过为毛人家上线7天的新站这次更新直接变4了?

                                                                              • 优发058
                                                                                优发058 0

                                                                                学习了 很好的文章

                                                                                • 津津有味
                                                                                  津津有味 1

                                                                                  学习了,支持鸟哥

                                                                                  • 家用制氧机
                                                                                    家用制氧机 0

                                                                                    我正想找这个代码呢,呵呵

                                                                                      • hello
                                                                                        hello 2

                                                                                        @ 家用制氧机 请教个问题啊,我用的是鸟哥的模板,在模板说明到缩略图时有这么一条:“添加自定义栏目,调用指定的图片,推荐此方法。”
                                                                                        我想问
                                                                                        1.如何添加自定义栏目?
                                                                                        2.这种方法怎么用?怎么操作才能调用到图片?
                                                                                        知道的朋友也可以告诉下我啊,谢谢了!!
                                                                                        自定义栏目添加中,这个值填什么呢?比如说我想指定的文章对应固定的图片,不要让图片随即的显示,怎么操作呢?谢谢
                                                                                        提交成功,刷新页面之前你可以

                                                                                      • 三水
                                                                                        三水 3

                                                                                        问个问题
                                                                                        页面下的友情链接,能不能只选择显示一个链接分类目录?

                                                                                          • 知更鸟
                                                                                            知更鸟

                                                                                            @ 三水 主题已预留了该功能,打开footer模版查找“&category=”在后面加上链接分类ID

                                                                                              • 三水
                                                                                                三水 3

                                                                                                @ 知更鸟 太感谢了,太给力了!
                                                                                                还有个小疑问,友情链接可以加nofollow吗

                                                                                                  • 知更鸟
                                                                                                    知更鸟

                                                                                                    @ 三水 可以,链接编辑页在“链接关系网”关系(rel)中添加nofollow

                                                                                                      • 三水
                                                                                                        三水 3

                                                                                                        @ 知更鸟 大哥,是在下面的“备注”中加上rel=”nofollow”吗?
                                                                                                        关系(rel),不能写什么,只能选择是,同事、朋友等等啊。不能直接写rel=”nofollow”啊

                                                                                                    • Bob
                                                                                                      Bob 5

                                                                                                      @ 知更鸟 鸟哥果然细心!

                                                                                                  • 减速机
                                                                                                    减速机 1

                                                                                                    很好的文章。

                                                                                                    • 平台出租
                                                                                                      平台出租 1

                                                                                                      不错,值得借鉴。

                                                                                                      • Tmd
                                                                                                        Tmd 5

                                                                                                        对这种效果没兴趣

                                                                                                        • 西安人流医院
                                                                                                          西安人流医院 0

                                                                                                          备用了 很不错

                                                                                                          • 西安人流
                                                                                                            西安人流 0

                                                                                                            效果很好不错的

                                                                                                            • 物极必反
                                                                                                              物极必反 2

                                                                                                              鸟哥,你右侧的那个“返回顶部”的代码可以不可以共享下哦。

                                                                                                              • 天下分享网
                                                                                                                天下分享网 1

                                                                                                                鸟哥,我的网站ID太多,网页显示不过来[img]http://www.ttshare.com/wp-admin/themes.php?page=theme_options.php[/img]

                                                                                                                • DHA
                                                                                                                  DHA 1

                                                                                                                  学习了,看来我还是太嫩!

                                                                                                                  • Adazi资讯网
                                                                                                                    Adazi资讯网 3

                                                                                                                    这,,,效果好看不~~

                                                                                                                    • 星睿电脑网
                                                                                                                      星睿电脑网 0

                                                                                                                      这个特效很不错,我也要试试

                                                                                                                      • 酷特网
                                                                                                                        酷特网 1

                                                                                                                        萝卜青菜,各有所爱吧

                                                                                                                        • 太阁
                                                                                                                          太阁 1

                                                                                                                          博主有时间把首页的那个图片也改成自动滚动的吧。我研究了一晚上也,改了没有反应,也不知道哪里弄错了。

                                                                                                                          • ئۇچقۇن
                                                                                                                            ئۇچقۇن 1

                                                                                                                            你好我用了你的主题 ,,,多谢谢你。。
                                                                                                                            这个主题小工具没显示首页[img][/img]
                                                                                                                            [img][/img]

                                                                                                                            • ئۇچقۇن
                                                                                                                              ئۇچقۇن 1

                                                                                                                              帮我修改一下吧。。。打扰你了

                                                                                                                              • 减速机
                                                                                                                                减速机 0

                                                                                                                                嗯,虽然博主说的慌得难受点,不过确实是个不错的方法,可能会方便一些客户

                                                                                                                                • 义乌招聘网
                                                                                                                                  义乌招聘网 2

                                                                                                                                  代码看不懂,但是复制过来还是能用的。谢谢了。

                                                                                                                                  • Jason
                                                                                                                                    Jason 0

                                                                                                                                    请问如果我想让右侧最下面一个小工具一直跟随到页面最底部,而不是从上面的小工具跟随到下面。要如何实现 ? 意思就是说,有时候文章太长了,到了文章后部分的时候左侧就没有小工具了,就是空白区域,我想让左侧的最下面的小工具跟随下来,这样就不会有空白区域了,该如何实现呢 ?

                                                                                                                                      • 知更鸟
                                                                                                                                        知更鸟

                                                                                                                                        @ Jason 只想滚动最下面的小工具那是不可能的,因为无法单独选择某个小工具DIV,唯一的方法是自己修改模版,在侧边加一个特殊的固定模块,之后选择这个模块滚动….

                                                                                                                                      • 沁园春
                                                                                                                                        沁园春 1

                                                                                                                                        看到过,准备给自己博客弄一个,话说这个主题用的人很多啊。

                                                                                                                                        • 第9空间
                                                                                                                                          第9空间 2

                                                                                                                                          关于这个功能今天一定要来吐一下槽,从下午发表了一篇比较长的文章后就开始折腾,一直到现在凌晨一点才实现跟随滚动,一般js代码都是放在与标签之间,但这个放在与之间死活实现不了,开始以为可能是我右侧太长了所以无效,于是在网上去找啊,试了好几种代码都是没有。期间发现不少就是直接从鸟哥这里copy的,连代码之外的字都一模一样,呵呵。后来看到你之前一篇《jQuery实现侧边栏随窗口滚动
                                                                                                                                          》第28楼的回复,去他的站去看,里面有一句话“步骤二:将如下代码添加到顶部模版的后:”,心想难道是我代码放在之前了所以才无效吗,立马把鸟哥的代码换到后,上传刷新,哦耶,终于搞定~~~~~总共花了八九个小时,结果就一个代码位置放错。。。哎。。。不过加上这个效果阅读的时候确实很晃眼。http://www.xptt.com/to-roll-up-your-sidebar.html/comment-page-1鸟哥,像这个页面上把热门标签和随机文章给单独拉出来,而且不是跟着滚动是固定在那是怎么实现的呢?他这个上面放出的代码也是整个sidebar一起跟着滚动的,跟他自己用的不一样。我现在网站上是用他的这个在进行测试。因为我们这个hotnews主题是直接调用后台的小工具集,那怎么去单独选择其中一个或几个模块的ID呢?自己实在想不出辙了,只好在这里向你请教了。

                                                                                                                                          • xlxl2010
                                                                                                                                            xlxl2010 1

                                                                                                                                            我喜欢这样的功能

                                                                                                                                            • 坏蛋盒子
                                                                                                                                              坏蛋盒子 0

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

                                                                                                                                              • celine outlet
                                                                                                                                                celine outlet 1

                                                                                                                                                能让边栏固定跟随移

                                                                                                                                                • 鲜活优惠码
                                                                                                                                                  鲜活优惠码 3

                                                                                                                                                  这个有点烦感觉

                                                                                                                                                  • mays1986
                                                                                                                                                    mays1986 1

                                                                                                                                                    一直在找这样的东西

                                                                                                                                                    • 厦门SEO
                                                                                                                                                      厦门SEO 0

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

                                                                                                                                                      • nurbilik
                                                                                                                                                        nurbilik 0

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

                                                                                                                                                        • 古典道
                                                                                                                                                          古典道 0

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

                                                                                                                                                          • inphon
                                                                                                                                                            inphon 0

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

                                                                                                                                                            • 苏苏网赚博客
                                                                                                                                                              苏苏网赚博客 2

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

                                                                                                                                                              • 读书破万卷
                                                                                                                                                                读书破万卷 0

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

                                                                                                                                                                • 网赚博客
                                                                                                                                                                  网赚博客 3

                                                                                                                                                                  感谢知更鸟大师

                                                                                                                                                                  • 小麦粒
                                                                                                                                                                    小麦粒 0

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

                                                                                                                                                                    • 萨龙龙
                                                                                                                                                                      萨龙龙 4

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

                                                                                                                                                                      • 智享互联
                                                                                                                                                                        智享互联 3

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

                                                                                                                                                                        • 健身护具
                                                                                                                                                                          健身护具 0

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

                                                                                                                                                                          • 番茄
                                                                                                                                                                            番茄 2

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

                                                                                                                                                                            • 深圳SEO
                                                                                                                                                                              深圳SEO 0

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

                                                                                                                                                                              • 古意人
                                                                                                                                                                                古意人 2

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

                                                                                                                                                                                • crazy
                                                                                                                                                                                  crazy 0

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

                                                                                                                                                                                  • 爱美护肤网
                                                                                                                                                                                    爱美护肤网 0

                                                                                                                                                                                    :mrgreen: 不错奥

                                                                                                                                                                                    • 深蓝
                                                                                                                                                                                      深蓝 0

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

                                                                                                                                                                                        • 跨境电商平台
                                                                                                                                                                                          跨境电商平台 2

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

                                                                                                                                                                                        • 木易杨
                                                                                                                                                                                          木易杨 0

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

                                                                                                                                                                                        匿名

                                                                                                                                                                                        发表评论

                                                                                                                                                                                        匿名网友 填写信息

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

                                                                                                                                                                                        确定