jQuery实现侧边栏随窗口滚动

2012年2月7日12:09:32WordPress7623.7K阅读模式

摘要近日帮人作主题要求弄个侧边栏某个模块随窗口一起滚动，可能其它童鞋也想给主题加上这个小功能，贴出来，供大家参考。方法很简单，前提是你的主题必须已加载了jQuery。把下面代码加到主...

近日帮人作主题要求弄个侧边栏某个模块随窗口一起滚动，可能其他童鞋也想给主题加上这个小功能，贴出来，供大家参考。

方法一：

很简单，前提是你的主题必须已加载了jQuery。

把下面代码加到主题头部header.php模版中即可：

<script type="text/javascript">
$(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
});
}
});
});
</script>

可根据不同的主题模版，自行修改一下其中的DIV标签#sidebar名称。此方法兼容所有浏览器。

演示效果

HotNews主题也可使用该功能，默认是整个侧边栏随窗口滚动，受主题布局功能限制，单独滚动某个模块效果不是很理想。

参考自：http://css-tricks.com/scrollfollow-sidebar/

方法二：

本人未试过，可以自行参阅：js页面滚动时层智能浮动定位实现

$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: "absolute",
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
$("#float").smartFloat();

本站文章大部分始于原创，用于个人学习记录，可能对您有所帮助，仅供参考！

我的微信

本站原创文章转载请注明文章出处及链接，谢谢合作！

获取本主题

598845006

咨询主题请加Q：598845006

多功能主题 Begin

本文由 知更鸟 发表于 2012年2月7日12:09:32
转载请注明：https://zmingcx.com/jquery-the-the-the-the-the-the-sidebar-scroll-with-the-window.html | 知更鸟

WordPress
JQuery

为WordPress文章添加排序选项

08月10日 4 1.5K

阿里云虚拟主机Nginx服务器wordpress伪静态规则设置教程

02月19日评论 264

WordPress 5.0 RC候选版本发布

11月30日评论 837

在 WordPress 仪表板中添加自定义模块

09月09日评论 1.2K

获取本主题

598845006

咨询主题请加Q：598845006

多功能主题 Begin

评论 76 访客 61 作者 5

软件盒子 2
2012年2月7日 13:29:35 浙江省台州市 1F
回复
原创出于这里啊，厉害的知更鸟
- 时光的线条 4
  2012年2月7日 15:01:10 浙江省 B1
  回复
  @ 软件盒子嗯学习了~
- 一堵墙 4
  2012年2月8日 09:12:53 云南省昆明市 B1
  回复
  @ 软件盒子原创出自CSStrick不得不说知更鸟这次慢了，人家都出了很久了
Tmd 5
2012年2月7日 15:37:55 福建省厦门市 2F
回复
这个是个好东西
户外用品 1
2012年2月7日 16:56:23 浙江省宁波市 3F
回复
简单的几行代码，就实现了效果，值得学习啊。
Amoy厦门 4
2012年2月7日 17:31:49 福建省厦门市 4F
回复
请问怎么修改主题的ico图标啊？你的很多说明你都没有。找不到解决方法。
- blueman 4
  2012年2月7日 19:48:38 江苏省徐州市 B1
  回复
  @ Amoy厦门 HotNewspro.zipimagesfavicon.ico
  这个图标就是主题图标.
  用你自己的图标替换即可.
  - Amoy厦门 4
    2012年2月7日 20:01:48 福建省厦门市 B2
    回复
    @ blueman 成功了。谢谢哈···
    - blueman 4
      2012年2月7日 20:38:01 江苏省徐州市 B3
      回复
      @ Amoy厦门不客气哈.我知道的不多,刚好知道.
      - 玖零博客 0
        2012年2月23日 18:56:36 重庆市 B4
        回复
        @ blueman 多级嵌套回复。。。
        
        以諾 3
        2012年4月13日 15:54:45 四川省成都市 B5
        
        @ 玖零博客在来一级
        
        sss 1
        2012年5月23日 00:11:44 北京市 B5
        
        @ 以諾还可以嵌吗？
        
        1212 0
        2012年11月6日 11:18:43 广西 B5
        
        @ sss 1111111111
        
        阳光互联网博客 2
        2012年11月7日 12:49:34 新疆乌鲁木齐市 B5
        
        @ 1212 我只是来盖楼的！！！
        
        社会主义等不来 0
        2013年2月27日 18:50:34 北京市 B5
        
        @ 阳光互联网博客添砖加瓦，更上一层楼！
老人头 0
2012年2月7日 17:57:26 江苏省镇江市 5F
回复
不弄了，弄到最后弄不回去了
永恒之塔基地 3
2012年2月7日 22:50:51 四川省成都市 6F
回复
这段是个好东西啊。
一堵墙 4
2012年2月8日 08:57:40 云南省昆明市 7F
回复
和我看的地方居然是一样的
北京燕竹医院 1
2012年2月8日 09:54:50 北京市 8F
回复
请问那东西难弄吗？
小z 4
2012年2月8日 12:19:45 四川省成都市 9F
回复
鸟哥您好！安装了一个主题后台没有您这个关键词和描述的设置！不太懂代码！好像可以用插件代替！您推荐一个好的插件呗！或者直接写在头部文件里！直接写在头部文件里有什么影响呢？您把描述和关键词的代码写给我一下吧！谢谢！
低压电容器 4
2012年2月9日 10:36:22 浙江省温州市 10F
回复
这个确实不错。等下把我的博客也加上。
bluehost 4
2012年2月9日 13:47:52 江苏省徐州市 11F
回复
(a) href=”http://zmingcx.com/category/hotnewspor” title=”HotNews主题” (/a)
请问上面的TITLE 的内容,不想在右下角显示, 而是随鼠标的位置显示,应该在哪个文件中更改?
80后Tim博客 1
2012年2月9日 14:23:34 江西省鹰潭市 12F
回复
成功了！嘎嘎，谢谢！
管理教程 4
2012年2月9日 15:32:09 广东省东莞市 13F
回复
鸟哥，又来叨扰您了，我网站的最新评论貌似没动静了，有新回复，可还是没有更新，一直都是旧的回复评论，不知道问题出在哪里，拜请帮忙看看，谢谢http://www.5u1314.com/
- 知更鸟
  2012年2月10日 08:37:34 中国 B1
  回复
  @ 管理教程主题侧边最新评论不显示登录者留言
游戏大牛 2
2012年2月9日 21:32:46 湖南省 14F
回复
我头像呢…
科普巴士 6
2012年2月10日 10:26:28 澳门 15F
回复
想请教下鸟哥我现在用的那个“评论啦插件”应该怎么跟主题融合才能显示文章什么的评论次数？
网店货源 2
2012年2月10日 10:37:26 广东省广州市天河区 16F
回复
怎么才能在你这里留下言呢
灰指甲的治疗方法 3
2012年2月10日 10:43:26 河北省石家庄市 17F
回复
随窗口滚动
Win7en乐园 5
2012年2月10日 12:22:20 河南省信阳市固始县 18F
回复
呵呵，能滚动一部分就好啦！呵呵
面膜排行榜 1
2012年2月10日 13:41:21 上海市 19F
回复
博主的博客很喜欢，支持一个了！同时祝各位网友龙年吉祥、平安
Amoy厦门 4
2012年2月10日 16:38:05 福建省厦门市 20F
回复
注册时写着：密码将通过电子邮件发送给您。
但是却一直不会发邮件。知道怎么处理吗？
回复评论倒是可以收到邮件。
- 常喜 1
  2012年2月10日 19:05:25 北京市 B1
  回复
  @ Amoy厦门请问你如何解决的？？？我也有此问题
  - Amoy厦门 4
    2012年2月10日 22:56:21 福建省厦门市 B2
    回复
    @ 常喜直接让他显示出密码啊。不用邮件发送。哈哈···http://www.bukunu.net/blog/?p=758
    我百度到这个人的
Amoy厦门 4
2012年2月10日 17:12:48 福建省厦门市 21F
回复
已经解决了。吼吼···
妖妖小精 0
2012年2月10日 18:34:15 四川省成都市 22F
回复
很好很强大。哈哈·用了。。。
女包 4
2012年2月11日 10:16:28 江苏省南京市 23F
回复
鸟哥，这个第三名是你么 http://www.seowhy.com/u/zhuweikun/4536.html
- 知更鸟
  2012年2月11日 10:26:02 中国 B1
  回复
  @ 女包呵呵
  我网名知更鸟，robin只用在主题的页脚上
  本人对SEO一窍不通，也非常抵制一些所谓SEO人士
  - Bob 5
    2012年2月11日 12:22:41 浙江省杭州市 B2
    回复
    @ 知更鸟鸟哥威武！
  - 末鱼 2
    2012年4月10日 19:58:16 甘肃省兰州市 B2
    回复
    @ 知更鸟此人言谈举止谦和之中充满霸气，文武全才，凭借一手降龙十八掌在当今网坛叱咤风云，掌风一出，谁与争锋！
zoe 0
2012年2月12日 11:49:01 山东省 24F
回复
用上了。很赞。。
莫小丁 0
2012年2月14日 01:49:02 上海市嘉定区 25F
回复
能否请教一下，固定于你网页底部的黑色条是如何实现的，可否告知，感激。
- 知更鸟
  2012年2月14日 08:33:57 中国 B1
  回复
  @ 莫小丁如果会DIV+CSS不用教，你也能作，否则….
  可以自己下载我用的主题自己研究一下了
中尉咯咯 0
2012年2月15日 00:49:12 福建省福州市 26F
回复
我觉得，你引用的那个网址里面的那个些例子好一些。你用了animate，会不断抽搐，原例子使用absolute定位，不会抖动。
- WordPress网站优化之家 1
  2012年2月15日 13:42:11 湖北省武汉市 B1
  回复
  @ 中尉咯咯是的哦，如果浮动的模块高度超过一定范围就会不断抽搐，使用这种方法最好控制一下浮动模块的高度。
Fluky Loser oO 5
2012年2月15日 12:06:22 河南省信阳市固始县 27F
回复
已经添加了！
WordPress网站优化之家 1
2012年2月15日 13:38:06 湖北省武汉市 28F
回复
简单实用，不错。不过我的主题加载了WordPress3.0自带的jquery库，完全照搬代码是不行的，不然就跟我的下拉菜单冲突了。有木有跟我一样问题的童鞋？解决方法在我的博客里有介绍哦~http://www.wpohome.com/wonderful-recommendation/2012/0214/457.html
- 知更鸟
  2012年2月15日 20:38:45 中国 B1
  回复
  @ WordPress网站优化之家该功能有一个缺陷，那就是严重影响正常阅读时的视线
影评 1
2012年2月16日 11:38:00 广东省深圳市 29F
回复
好像用css也可以实现这样的浮动吧？
电脑租赁 3
2012年2月25日 16:02:44 上海市 30F
回复
主题头部header.php模版找了半天都没找到，悲剧
蛋炒饭 1
2012年3月7日 22:57:18 山东省 31F
回复
标题的字数如何设个限制
tetsu 1
2012年3月20日 22:58:05 陕西省西安市 32F
回复
觉得不滚动就挺好的，没太大必要去滚动
志慧 1
2012年3月25日 20:05:03 江苏省苏州市 33F
回复
鸟哥啊~以前行的怎么突然不行了？我没动什么东西啊~
72008 0
2012年3月28日 19:57:09 广东省 34F
回复
找了好久终于
返钱网 0
2012年4月1日 01:11:53 广东省深圳市 35F
回复
博客皮肤不错，哪里有下载啊
yong718100 0
2012年4月6日 17:49:50 陕西省西安市 36F
回复
请问：
楼主你的右侧那个是什么插件？
就是“返回顶部”、“查看留言”、“转动底部”那个插件。
- 知更鸟
  2012年4月6日 22:44:25 中国 B1
  回复
  @ yong718100 主题集成非插件
  可以参考一下
  http://zmingcx.com/wordpress-template-for-the-scroll-button-to-add-a-fixed.html
肝癌晚期治疗方法 1
2012年6月23日 08:55:31 河北省石家庄市 37F
回复
肺癌晚期能活多久
得失网 0
2012年6月28日 18:18:29 云南省曲靖市宣威市 38F
回复
嗯，这个功能很实用，想搬到我的ASP网站上试一下。但愿有效1
求教 2
2012年7月17日 17:29:21 江西省九江市 39F
回复
这个能限制高度么？第一个代码加上去会无止境下滑。。导致只能限制部分侧边栏，下面的显示不出来。因为下拉就跟着下拉。。。
sun 2
2012年9月21日 18:05:14 浙江省温州市 40F
回复
碉堡了。！
内涵图 0
2013年4月26日 11:00:10 河南省郑州市 41F
回复
方法不错实验下
doghap 1
2013年5月28日 10:08:57 吉林省长春市 42F
回复
我用了这一段代码,但是有个问题: 页面滑倒页脚时还是能滑动,我想侧边栏到页脚的元素那里就停止滑动的,这个能解决吗??
- hbbb 0
  2014年8月10日 23:13:10 意大利 B1
  回复
  @ doghap 同问。。。。
围挡 4
2013年9月2日 12:08:41 广东省广州市 43F
回复
两个都反复试了，怎么我的实现不了的啊。
番茄 2
2016年4月23日 00:00:01 湖北省武汉市 44F
回复
你的点赞的效果不错，有这代码或者插件吗？

WordPress

Plugins

Web前端

设计资源

jQuery实现侧边栏随窗口滚动

为WordPress文章添加排序选项

阿里云虚拟主机Nginx服务器wordpress伪静态规则设置教程

WordPress 5.0 RC候选版本发布

在 WordPress 仪表板中添加自定义模块

来自外部的引用

发表评论

WordPress多功能主题： Begin

购买本站主题请加QQ：598845006