之前谈过 关于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年9月14日 下午1:16 4F
看了头晕 我还是用插件简单些
2013年9月14日 下午3:25 B1
@ NameDomain @NameDomain : 其实插件多了不好,能折腾还是折腾写进取。
2013年8月29日 下午2:17 3F
这代码先前在一模板上测试了可以用,但换了一模板后再添加就不行了。也不知道是啥原因。
2013年8月29日 下午5:42 B1
@ 米弟 @米弟 : 你仔细查看下,可能其他模板缺少某些元素。
2013年8月26日 下午9:46 2F
这个功能找了好久,就这个碰巧能用,还有点小问题!
2013年8月26日 下午10:10 B1
@ 智享互联 @智享互联 : 有什么问题呢?其实这个功能有时候也不好,开始弄了一段时间,后来我又去掉弄这个了。因为手机浏览直接遮盖了内容了。
2013年3月4日 下午4:35 1F
2013年3月4日 下午4:36 B1
@ 米粒在线 这是侧边广告代码。