您好！欢迎来到模板下载吧！本站资源24小时自动发货，请放心选购，一次付费，终身下载，售后请提交工单！
提交工单 快速入门 在线PS 发布资源赚 站长工具箱 领取优惠券荐

模板下载吧

模板下载吧 五周年

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

半岛未凉 2017-04-09 快速入门 2567 已收录 本文共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+用户成功建站，为草根创业提供助力！

立刻开启你的建站之旅
  • 微信公众号
  • 模板下载吧
  • 官方QQ群
  • 模版下载吧（群1）
  • 模版下载吧（群2）
  • 模版下载吧（群3）

模板下载吧精品模板

周一至周五 9:00-23:00
（其他时间勿扰）

在线咨询
Copyright ©2014-2020 模板下载吧 阿里云 本站安全防护由创宇云安全提供。
-查询155 耗时0.976 内存 34.64MB
商务合作: vip#mbxzb.com(#换成@)
现在加入模板下载吧，注册一个账号 或
账号登录
QQ登录
';

  • 模板下载吧拥有海量网站模板及源码，站长亲测干净无后门。

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

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

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

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