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

  • 8
  • 22,586 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
  • 转载请务必保留本文链接:https://www.miliol.org/4131.html
网站建设

为了WordPress运行效率翻倍我用Cyberpanel替代了宝塔面板

因为我的博客最近这段时间总是莫名其妙的卡成狗,用的是应该是某个插件的原因,正好许久没折腾了就追求刺激,准备重新使用我以前心心恋恋的 openlitespeed,当初测试在都安装插件的情况下 NGINX...
SEO相关

PHP默认时区无效最简单的解决方法

参考了网上很多方法,有的修改模板的配置文件,有的要修改PHP里面的时区,有的要修改WORDPRESS的配置文件,试了试都没有解决。 后台直接修改 首先,后台-设置-常规,检查一下WordP...
匿名

发表评论

匿名网友 填写信息

:?: :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