您好!欢迎来到模板下载吧!本站资源24小时自动发货,请放心选购,一次付费,终身下载,售后请提交工单!

实现wordpress侧栏固定浮动效果又一方法,本站测试可用!

半岛未凉 2017-04-09 快速入门 2581 已收录 本文共1489个字,预计阅读需要4分钟。
  • 文章介绍
  • 快速入门
  • 增值服务

之前小编在wordpress主题下载站给大家介绍过一款可以实现实现wordpress侧栏固定浮动效果的插件,详细可以点击:《给wordpress边栏添加固定悬浮小工具的插件》,但是很多朋友反应插件使用过没效果,那么今天介绍的方法,将是用代码实现的!小白能够听懂的!

其实大多需要wordpress侧栏固定浮动效果的朋友都是因为觉得wordpress博客网站的侧边栏通常都不是太长,而随着页面往下拉,导致右侧显得很空,及时首页的侧栏高度和网站高度能够一样高的时候,在文章页面里,还是会显得右侧会空下来,因为不一样的文章,高度也不一样,这个时候十分需要一个wordpress侧栏固定浮动效果的功能,好让右侧不那么空,也可以增加用户的点击欲望,对于有广告的用户,将广告加入侧栏固定浮动后,用户点击量会增加,从而增加收入!

那么我们现在详细的解说下实现wordpress侧栏固定浮动效果的具体方法:

运用到下面的代码(当然是在边栏sidebar.php文件内添加):

  1. <div id="float">
  2. 你要悬浮的内容
  3. </div>
  4. <script type="text/javascript" src="http://www.***.com/a.js"></script>

div内可以自由添加要悬浮的div内容,而下面运用的js文件的内容为:
// 固定层

  1. function buffer(a, b, c) {  
  2.     var d;  
  3.     return function() {  
  4.         if (d) return;  
  5.         d = setTimeout(function() {  
  6.             a.call(this),  
  7.             d = undefined  
  8.         },  
  9.         b)  
  10.     }  
  11. } (function() {  
  12.     function e() {  
  13.         var d = document.body.scrollTop || document.documentElement.scrollTop;  
  14.         d > b ? (a.className = "div1 div2", c && (a.style.top = d - b + "px")) : a.className = "div1"  
  15.     }  
  16.     var a = document.getElementById("float");  
  17.     if (a == undefined) return ! 1;  
  18.     var b = 0,  
  19.     c, d = a;  
  20.     while (d) b += d.offsetTop,  
  21.     d = d.offsetParent;  
  22.     c = window.ActiveXObject && !window.XMLHttpRequest;  
  23.     if (!c || !0) window.onscroll = buffer(e, 150, this)  
  24. })();  

大家可以新建个a.js文件来调用,或者直接将上面的js代码放到你们wordpress已调用的js内!最后,给style.css里添加样式为:

  1. .div2{top:10px;z-index:999;position:fixed;_position:absolute}  

教程到这,相信基本都会了吧。。。如果还不会的,加模板下载吧站长QQ:122232217 收费解决问题。。。哈哈。。。

温馨提示:本文最后更新于2019年3月19日,已超过 2 年没有更新,如果文章内容或图片资源失效,请留言反馈,模板下载吧会及时处理,谢谢!

上一篇:

下一篇:

实现wordpress侧栏固定浮动效果又一方法,本站测试可用!:等您坐沙发呢!
大牛,别默默的看了,快来点评一下吧!:)。

您必须登录后才能发表评论哦!:)

站内登录 QQ登录 微博登录
wordpress自适应高级图片shejigh主题

Hi, 如果你对这款模板有疑问,可以跟我联系哦!

联系作者

模板下载吧,累计帮助1000+用户成功建站,为草根创业提供助力!

立刻开启你的建站之旅
现在加入模板下载吧,注册一个账号
';
  • 模板下载吧拥有海量网站模板及源码,站长亲测干净无后门。

  • 注册即能下载免费模板栏目资源,帮您更快的完成网站建设。

  • 每日更新模板资源,每日精品推荐,及时获取最新模板资源流行去向。

  • 完美的售后服务,帮助草根站长、企业等成功建站。

  • 将您最爱的资源收藏,建立自己的资源库,并与朋友分享。