侧边栏随页面滚动的浮动效果可以在您的wordpress网站在文章内容比较长的时候,用户浏览到页面下方时,不至于使整个页看上去不那么协调。看了很多的博客在侧边栏的某个模块设置了浮动,效果很不错,特别是对于有广告的网站,大大增加了广告的曝光度。那么,如何实现呢?今天我们就来讲几种不用插件来实现的方式,当然,方法都同整理网上的一些方法。 在用以下几种方法的时候,首先要确保引入了jQuery文件,如果没有的话,请在header.php文件中引入
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
当然也可以引入主题中的jquery文件。点击这里查看更多在线jquery CDN。
方法1:
在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: "10px" }); } 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>
缺点:由于是用id属性,所以只能添加一个浮动代码块。我试着给代码添加class属性,然后把
$("#float").smartFloat();
中的 #float
改为 .float
。结果不管用~~方法2:
同样是在footer.php文件中加入如下代码:
/*页面智能层浮动 整理发布:9iphp.com */ jQuery(document).ready(function($){ var $sidebar = $(".float"), $window = $(window), offset = $sidebar.offset(), topPadding = 20; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); });
然后在sidebar.php中需要浮动的代码块class属性中添加float即可。如:
<div class="float">这里放入要漂浮的元素 </div>
优点:可以添加多个浮动块
缺点:在浮动块高度比屏幕还要高的时候,页面滑动到底部之后还可以向下滑动。不知道怎么解决,希望知道方法的朋友在留言中给出~
小义 2014/01/24 14:55
我用的是方法一
Specs 2014/01/24 15:13
@ 我刚开始也用了第一个,结果各种问题~~ 浮动的时候,边栏宽度就变了,而且就能放一个。所以又找了找其他方法。
小义 2014/01/24 15:32
@ 嗯,有这种情况,我放的图片,所以边栏宽度不会变。
小义 2014/01/24 15:34
上次看别人用这套主题给文章背景加图片,效果不错。结果用到我的主题,就不行了,搞了好久没搞好。呵呵
Specs 2014/01/24 15:40
@ 给文章加背景图?
小义 2014/01/24 15:45
@ http://blog.thiece.cn/2014/1084.html 嗯嗯。你可以试试
Specs 2014/01/24 16:00
@ 弄出来了,看看怎么样~~ 还差随机读取图片~
Specs 2014/01/24 16:11
@ 背景随机也OK了~~~
小义 2014/01/24 16:14
@ 嗯。我把代码放到我主题下面不行,郁闷
Specs 2014/01/24 16:17
@ 把文章内容外面套个DIV才行~
小义 2014/01/24 16:18
@ 我来试试
斌果 2014/01/26 11:40
你现在的这个浮动不错,很自然
Specs 2014/01/26 16:15
@ 嗯 用的第二种方法。对了,你那个主题单页面我用着好像有问题,帮忙看下啊?
斌果 2014/01/27 06:59
@ 嗯
Specs 2014/01/27 08:31
@ 换过来了 你看看http://www.9iphp.com/guestbook
凯凯 2014/11/15 09:45
楼主可以去扒一个呀,我看有的网站中间部分浏览完 浏览到底部时候右侧浮动就跟随中间部分滚动上去了,那样比较好,就是页面长度不长右侧浮动不会盖住底部。
Specs 2014/11/15 10:55
@ 嗯 看到过
小冉博客 2015/01/05 16:50
两种方法都不行 那倒是 主题的问题????
Specs 2015/01/05 17:40
@ js位置不对?反正我试了都可以的~
小冉博客 2015/01/06 11:04
@ 您好 请问您是用我的网站测试的吗? 我试了 不行呢?
Specs 2015/01/06 11:11
@ 显然我没法用你的网站测试啊~ 而且这个JS的什么网站是无关的。
小冉博客 2015/01/06 11:20
@ 我的意思是你用 审查元素得到方式测试下 我测试不行呢?
Specs 2015/01/06 11:28
@ 你是这么测试的? 这么弄的话,JS是加载不上去的。
小冉博客 2015/01/06 11:38
@ 我说我用了好多方法 都不行呢
Specs 2015/01/06 11:39
@ 我的意思是你别在审查元素那里测试! 直接去修改源代码
小冉博客 2015/01/06 11:40
嗯 明白了 谢谢
Starsss 2015/06/13 20:17
我感觉是当滚动满足条件之后,受到margin-top这里的影响,为了满足条件,导致无限增高。这里我是通过增加fixed属性来完成的。
Specs 2015/06/14 22:03
@ 可能吧
龙笑天 2016/05/06 16:17
博主,能把这种侧栏浮动效果实现出来吗,这种太给力了,来自newspaper主题,demo.tagdiv.com/newspaper/td-post-diy-and-interior-design-tips-decorating-to-celebrating-the-great-indoors/
Specs 2016/05/07 11:50
@ 这不是跟我网站这个一样的吗
龙笑天下 2016/07/15 18:00
@
跟你这个不一样哦!我已经知道怎么弄了!可以百度搜索“简单代码实现智能侧边栏跟随固定浮动的效果”,看看设置方法和效果。PS:居然不能放链接............
Specs 2016/07/15 21:51
@ 没发现什么不一样,我现在用的侧边栏的效果跟那个没什么区别啊
龙笑天 2016/09/24 15:54
@ 很大不同哦~PS:你这没有评论回复邮件通知啊~
nice 2019/02/21 10:30
第一个不管用 第二个无限滚动。。