现在的位置: 首页 > Wordpress > WP技巧 > 正文
jQuery实现侧边栏滚动效果
2010年08月21日 WP技巧 ⁄ 共 721字 评论数 38 ⁄ 被围观 6,469+

话说已经有很多童鞋折腾上这个侧边栏随页面往下滚动的效果了,像阿邙童鞋闲云童鞋等等。至于效果大家一看便知道,一来可以给自己的侧边栏增加些活力,不至于在评论时看不到侧边栏的内容,二来可以为自己的广告造势,增加点击率。下面就来分享下实现过程吧!

首先给需要滚动的那个栏目的ID 命名,例如div id="scrollad",然后需要加载jQuery,至于方法,已经不用再多说了,看以前的文章利用jQuery实现侧边栏Tab切换效果就明白了。

接着写入控制码。

$(function() {
var $sidebar = $("#scrollad"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});

最后在侧边栏插入你想随页面下拉需要滚动的内容即可,不过记得写上div id="scrollad"哦,例如我放的是“本月水王”以及百度的一个广告,还请各位童鞋多多支持,多多捧场。

一起欣赏下侧边栏的效果吧!

刚开始弄的时候遇到一个小问题就是会“无限往下滚动”,后来才发现原来是滚动部分的高度加上页脚footer的高度超过了屏幕的高度,所以需要控制好侧边栏滚动部分的高度才行。总之,多多折腾就会成功的。



目前有 38 条留言 其中:访客:38 条, 博主:0 条

  1. 七七 : 2010年08月22日22:18:32  21楼

    嗯,不错,挺喜欢的!

  2. 浅心 : 2010年08月23日23:57:29  22楼

    :wink:这个我也搞了 呵呵

  3. {潮汛.} : 2010年08月25日01:38:13  23楼

    又发现一处错误“利用jQuery实现侧边栏Tab切换效果”连接目标是本文。 :mrgreen:


    • 管理员
      admin : 2010年08月25日07:53:11  地下1层

      挑错能手啊

  4. 朵未 : 2010年08月25日16:30:24  24楼

    效果不错,看的有点晕。有时间俺也要尝试。ad是不得不点了。 :mrgreen:

  5. 宿迁学院论坛 : 2010年08月26日20:19:19  25楼

    嘿嘿 如你所愿 帮你点下广告~

  6. winy : 2010年08月30日10:56:15  26楼

    可惜这些AD都是看不见得。。。


    • 管理员
      admin : 2010年08月30日11:00:49  地下1层

      屏蔽了?

      • winy : 2010年08月30日11:06:18  地下2层

        基本上只要是博客圈的,用非IE浏览器的 一般都看不见。。。。不说很真不知道有广告,不好帮你点了 ❓


        • 管理员
          admin : 2010年08月30日13:10:25  地下3层

          不至于吧 我也基本不用ie浏览博客 不过广告还是依旧啊 难道一定要装屏蔽广告的插件?

          • winy : 2010年08月30日13:14:35  地下4层

            adblock,我不装这个就不用fx了 😈

  7. 团购网 : 2011年01月10日14:26:45  27楼

    可惜这些AD都是看不见得屏蔽了?

  8. John : 2011年01月12日22:38:12  28楼

    不错,先学了。

  9. 倡萌 : 2011年11月19日23:17:35  29楼

    终于找到啦!兴奋!!回去在新主题上折腾下,谢啦

  10. 得失网 : 2012年07月01日23:58:30  30楼

    我的是自己用ASP写的网站程序源码,不知道能不能用上,收回去捣鼓一下看。


    • 管理员
      admin : 2012年07月02日10:15:04  地下1层

      这个我也不知了 试试看吧


如果觉得文章或者网站对您有帮助请点击 向TA付款 捐赠作者或者点击下面的分享按钮支持作者

更多

给我留言

留言无头像?

无觅相关文章插件,快速提升流量

×