开启辅助访问

QQ登录

只需一步,快速开始

使用新浪微博登录

一号多站,快速登录

立即注册 找回密码

魔扣论坛

查看: 342|回复: 4

[经验交流] WordPress 中利用JQuery实现侧边栏随窗口滚动效果

[复制链接]
  • TA的每日心情
    开心
    14 小时前
  • 签到天数: 968 天

    连续签到: 87 天

    [LV.10]论坛老兵

    3890

    主题

    4096

    帖子

    3万

    积分

    管理员

    Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30

    魔扣币
    154526
    贡献
    16215
    威望
    12048

    最佳新人活跃会员热心会员推广达人宣传达人突出贡献优秀版主荣誉管理论坛元老

    发表于 2015-12-13 20:42:05 | 显示全部楼层 |阅读模式

    --> 点击购买VIP <----> 点击购买魔扣币 <--【1元 : 50/80/100魔扣币】

    WordPress中利用JQuery实现侧边栏随窗口滚动的效果演示大家可以看看本站内页侧边栏,当然,只有在文章的页面够长时,侧边栏最底部的那个广告位才会随着窗口滚动,国外优秀包装设计作品集欣赏这篇文章够长,所以可以看到效果,如果觉得这种效果有点意思,你再回来看看怎么折腾WordPress才可以实现侧边栏随窗口滚动的效果。

    首先,你要把实现侧边栏随窗口滚动的效果的代码段放在侧边栏的最下面,如果你放在其他代码段的上面,那么位于其下的内容也都会随窗口滚动。例如本站就是把赞助链接放在最下面,因为我要把这段随着窗口滚动。

    其次,那就是要找到那个代码段的ID了,至于这个ID怎么查看,你看看你的sidebar文件应该明白,或者最简单的方法,用谷歌浏览器审查元素,什么东西都会暴露在你眼前的。找到了ID,先记下来。

    下面开始看jQuery代码部分:

    1. $(function() {
    2. var $sidebar = $(“#sidebar“),
    3. $window = $(window),
    4. offset = $sidebar.offset(),
    5. topPadding = 15;
    6. $window.scroll(function() {
    7. if ($window.scrollTop() > offset.top) {
    8. $sidebar.stop().animate({
    9. marginTop: $window.scrollTop() – offset.top + topPadding
    10. });
    11. } else {
    12. $sidebar.stop().animate({
    13. marginTop: 0
    14. });
    15. }
    16. });
    17. });
    复制代码

    看见上面的红色代码部分吧,那个就是要修改为你记下来的ID的部分,例如我的ID是“adxia”,那我就把那段改成“#adxia”,改好后的事自然就是在你的WordPress中加载了,加载好了JQ后就可以实现侧边栏随窗口滚动的超酷效果了,随至于如何加载JQ,请看加载jQuery库这里的相关部分。

    注意一点:就是这个你要随窗口滚动的部分的高度不能超过浏览器窗口的高度,还要除去footer的高度,否则会有无限向下滚动的情况出现。


    技术服务:网站建设丨SEO优化丨运营维护丨主题汉化丨超级托管
    魔扣源码论坛丨客服QQ:1367681973丨微信客服:morko-net

    该用户从未签到

    0

    主题

    110

    帖子

    220

    积分

    中级魔扣

    Rank: 3Rank: 3

    魔扣币
    110
    贡献
    110
    威望
    0
    发表于 2017-1-4 17:55:17 | 显示全部楼层
    我要的,不是短暂的温柔,而是一生的守候。',

    该用户从未签到

    1

    主题

    116

    帖子

    231

    积分

    中级魔扣

    Rank: 3Rank: 3

    魔扣币
    115
    贡献
    115
    威望
    0
    发表于 2017-6-22 14:13:10 | 显示全部楼层
    欢迎你,亲爱的朋友,看到你的留言让我十分高兴。记得从我们第一次接触以后开始互访,至今已经有5个多月了,在这段时间里,我们从陌生到相识相知,增进了彼此信任,友谊不断加深,直到现在成为好朋友,这都是前世修来的缘分。魔扣源码论坛让我们珍惜这份缘,我相信我们的友谊将永存!

    该用户从未签到

    0

    主题

    138

    帖子

    276

    积分

    中级魔扣

    Rank: 3Rank: 3

    魔扣币
    138
    贡献
    138
    威望
    0
    发表于 2017-12-11 09:52:18 来自手机 | 显示全部楼层
    有一种相遇叫缘份,有一种来往叫浪漫;有一种感觉叫难忘,有一种感受叫快乐;有一种关心叫温馨,有一种思念叫关爰;有一种默契叫知心;魔扣源码论坛祝福朋友幸福快乐!

    该用户从未签到

    0

    主题

    135

    帖子

    272

    积分

    中级魔扣

    Rank: 3Rank: 3

    魔扣币
    137
    贡献
    137
    威望
    0
    发表于 2018-7-19 07:04:05 | 显示全部楼层
    兄弟如手足,女人如衣服,谁动我手足,我扒他衣服-魔扣源码论坛!   
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    • 联系我们
    • 新浪微博 :
    • 在线客服 :魔扣科技 
    • 源码QQ群 :魔扣源码论坛官方总群
    • 联系邮箱 :charlin#morko.net
    • 微信扫一扫
    快速回复 返回顶部 返回列表