WordPress侧边栏添加随屏滚动效果实现方法
发布:smiling 来源: PHP粉丝网 添加日期:2014-03-19 22:43:12 浏览: 评论:0
本文章来给大家介绍一个不错的WordPress侧边栏添加随屏滚动效果,有需要了安装的也可照此方法来设置.
具体效果可以直接打开我博客首页查看(我的文章页是没有侧边栏的),简单说就是一定高度范围内侧边栏无定位属性(position:static),超过这个高度范围则跟随着屏幕一起滚动(position:fixed),经常逛淘宝的同学大概会有印象,当页面拖动使 宝贝详情 / 评价详情 / 成交记录 这栏超过屏幕显示范围时会固定到上方随着屏幕一起滚动,这样可以方便地切换内容,而不影响当前内容的浏览.
实现的方法很简单,在主题的 footer.php 中添加以下代码:
- <script type="text/javascript">
- $(document).ready(function(){
- $(function(){
- var swidth=$('#accordion1').width(); // 获取#accordion1的宽度(若侧栏为固定宽度的可以删去)
- $(window).scroll(function(){
- if($(this).scrollTop()>$("#header").height()){ // 滚屏距离大于#header高度时处理
- $('#accordion1').css({top:'30px',position:'fixed',width:swidth+'px'}); // 添加fixed和宽度
- } else {
- $('#accordion1').css({position:'static'}); // 复位
- }
- });
- });
- });
- </script>
#accordion1 是需要随屏滚动内容的ID,请按需修改,代码如下:
$(this).scrollTop()>$("#header").height()
判断滚动屏幕的距离是否大于 #header 的高度,你也可以修改成固定值,例如如下代码:
$(this).scrollTop()>200
var swidth=$('#accordion1').width();
用于获取#accordion1的宽度,固定宽度的可以删除这一行(包括后面的 ,width:swidth+'px').
Tags: WordPress 侧边 效果 方法
相关文章
- ·WordPress初级教程1:什么是博客?(2013-11-11)
- ·WordPress初级教程-2: 什么是WordPress?(2013-11-11)
- ·WordPress初级教程-3: WordPress的功能和特点(2013-11-11)
- ·WordPress初级教程-4: 选择WordPress博客的主机和域名(2013-11-11)
- ·WordPress初级教程-5: 安装WordPress(2013-11-11)
- ·WordPress初级教程-6: 本地安装WordPress(2013-11-11)
- ·WordPress初级教程-7: 一个数据库中安装多个WordPress博客(2013-11-11)
- ·WordPress初级教程-8: WordPress控制面板/ Dashboard(2013-11-11)
- ·WordPress初级教程-9: WordPress用户设置/ Users(2013-11-11)
- ·WordPress初级教程-10: WordPress博客配置/ Settings(2013-11-11)
- ·关于wordpress上传图片不显示的原因(2013-11-11)
- ·WordPress程序的脆弱点你知道吗 (2013-11-11)
- ·总结八大Wordpress网站百度收录实现秒收的方法绝招 (2013-11-11)
- ·WordPress如何网站投稿者也可以上传图片(2014-03-18)
- ·WordPress怎么修改新用户注册邮件内容(2014-03-18)
- ·WordPress怎么添加前台注册功能(2014-03-18)
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)