魔扣论坛

魔扣源码论坛业务
查看: 1617|回复: 5

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

[复制链接]
  • TA的每日心情
    无聊
    23 小时前
  • 签到天数: 2928 天

    [LV.Master]开坛老将

    7万

    主题

    227

    回帖

    27万

    积分

    管理员

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

    魔扣币
    744987
    贡献
    157747
    威望
    32799

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

    发表于 2015-12-13 20:42:05 | 显示全部楼层 |阅读模式
    魔扣币兑换比例:【 50以下 : ¥1 = 10 魔扣币 】丨【 50 - 100 :¥1 = 20 魔扣币】丨【 100以上:¥1 = 30 魔扣币 】

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?立即注册

    x

    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
    联系客服:微信:morko-net | QQ:1367681973

    该用户从未签到

    0

    主题

    254

    回帖

    508

    积分

    高级魔扣

    Rank: 4

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

    该用户从未签到

    1

    主题

    250

    回帖

    501

    积分

    高级魔扣

    Rank: 4

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

    该用户从未签到

    0

    主题

    274

    回帖

    550

    积分

    高级魔扣

    Rank: 4

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

    该用户从未签到

    0

    主题

    267

    回帖

    536

    积分

    高级魔扣

    Rank: 4

    魔扣币
    269
    贡献
    269
    威望
    0
    发表于 2018-7-19 07:04:05 | 显示全部楼层
    兄弟如手足,女人如衣服,谁动我手足,我扒他衣服-魔扣源码论坛!   

    该用户从未签到

    3

    主题

    259

    回帖

    522

    积分

    高级魔扣

    Rank: 4

    魔扣币
    260
    贡献
    260
    威望
    0
    发表于 2019-3-6 20:19:20 来自手机 | 显示全部楼层
    谢谢朋友的祝福我们用心倾注我们的友爱,用真情编织未来。遥遥千里,你在我的思念里,网络天空魔扣源码论坛,明天的牵挂尽在祝福中。思念,是不变的主题,飞越天际,将心意传递,愿朋友开心快乐!
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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