实现WordPress博客侧边栏广告跟随固定浮动效果的方法

  • 8
  • 20,669 views

 

之前谈过 关于jQuery实现侧边栏随窗口滚动,WordPress主题侧边栏随窗口滚动 但是觉得这样浮动显得有点喧宾夺主了。所以现在改成固定漂浮的了,下面把设置方法向大家详细介绍:

第一步:引入jquery.min.js,如果已经引入,则不必重复引入。在主题header.php文件中添加如下代码:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

第二步:在<body>标记前加入如下代码,推荐加在主题footer.php文件<body>标记前。

<script type="text/javascript">// <![CDATA[
$.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: pos,
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};

//绑定
$("#float").smartFloat();
// ]]></script>

第三步:打开主题侧边栏文件,一般为sidebar.php,把你想要跟随浮动的层添加id=float属性,大家可以参考如下代码:

<div id="float" class="float">
<h3>米粒在线推荐</h3>
广告代码
</div>


 

这样即完成了。如果大家需要修改广告层的显示样式,可自行修改层的CSS样式。


 

米粒在线
  • 本文由 发表于 2013年3月4日15:38:21
  • 转载请务必保留本文链接:http://www.miliol.org/4131.html
挑战手机抗冻极限 华为Mate 10 Pro竟然征服了南极 科技

挑战手机抗冻极限 华为Mate 10 Pro竟然征服了南极

按照我国节气来说现在正处在数九寒天中最冷的一段日子里,随便翻阅天气预报,全国各地大多数地区都在飘散着漫天的雪花,零下好几度的光景也成为了很多地区人与手机之间无法躲避的问题。尤其是北方用户,若是出门用手...
微信封杀!MIUI下线自动记账功能 科技

微信封杀!MIUI下线自动记账功能

小米在MIUI 9中加入了一个“微信自动记账”的新功能,可以自动聚合微信、支付宝、短信等平台的账单信息,免去手动记账的麻烦。 不过最近有不少网友发现,该功能已经无法正常使用,不能采集微信中的支付...
努比亚Z17正式开启安卓8.1内测:紧跟升级 科技

努比亚Z17正式开启安卓8.1内测:紧跟升级

去年12月份,谷歌公布了安卓各版本数据份额,据统计安卓8.0仅占安卓系统的0.5%,不过这也给目前的手机厂商打了一剂鸡血,都在紧赶着给自家手机升级安卓8.0系统。 今天,努比亚官方就在论坛开启了...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:8   其中:访客  8   博主  0
    • NameDomain NameDomain 1

      看了头晕 我还是用插件简单些 :???:

      • 米弟 米弟 0

        这代码先前在一模板上测试了可以用,但换了一模板后再添加就不行了。也不知道是啥原因。

          • 米粒 米粒 4

            @ 米弟 @米弟 : 你仔细查看下,可能其他模板缺少某些元素。

          • 智享互联 智享互联 0

            这个功能找了好久,就这个碰巧能用,还有点小问题!

              • 米粒在线 米粒在线

                @ 智享互联 @智享互联 : 有什么问题呢?其实这个功能有时候也不好,开始弄了一段时间,后来我又去掉弄这个了。因为手机浏览直接遮盖了内容了。 :mrgreen:

              • 米粒在线 米粒在线 4