最新消息:Excel无乱码转CSV,由于工作原因很少更新博客和回复大家的评论,非常抱歉。

WordPress 中利用JQuery实现侧边栏随窗口滚动效果

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

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

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

下面开始看jQuery代码部分:

$(function() {
var $sidebar = $(“#sidebar“),
$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
});
}
});
});

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

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

转载请注明:嗨酷哥,有你更酷! » WordPress 中利用JQuery实现侧边栏随窗口滚动效果

与本文相关文章

发表我的评论

取消评论
表情 插代码

Hi,您需要填写昵称和邮箱!

  • 必填项
  • 必填项

网友评论1条  本站回复1

  1. 谢谢哦,用上了。

    chanbee2012-03-13 20:58 回复