本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?立即注册
x
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的高度,否则会有无限向下滚动的情况出现。
|