wordpress侧边栏滚动固定

文章目录

其实在蛮多地方都看到过这个效果了,当文章过长超过侧边栏的长度时往往侧边栏一片空白,似乎有些单调,最好是侧边栏一直东西在展示。下面介绍下如何实现wordpress侧边栏滚动固定。

jquery代码

如果已经加载好了jquery库,那么引入如下一段jquery代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(document).ready(function($){
$.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)); 
});
};
 
//绑定
$("#sidebar-float").smartFloat();
 
});

大家看上面的代码,前面是一段smartfloat函数,最后是将#sidebar-float元素与这个函数绑定,也就是说如果你想让某个模块随着页面滚动,就在这个模块加上id=“#sidebar-float”。具体向下看:

html结构

大家看我的右边栏,可以看到文章专题这个模块是在随着页面滚动的,它的html结构就是:

1
2
3
4
5
6
7
8
<li id="sidebar-float">
 
    <h3>文章专题</h3>
    <ul>
    <li><a href="https://www.tennfy.com/category/wordpress/wordpress-theme">wordpress主题代码实现功能</a></li>
    </ul>
 
</li>

我在<li></li>标签里加上了id=“#sidebar-float”,这样这个模块就可以随着页面滚动了。

总结

这篇文章参考了实现WordPress博客侧边栏广告跟随固定浮动效果的方法,这个方法有个问题是:窗口不是最大化时,会靠边,最右边。有时只显示一半。但是一般人也不会看半个窗口,基本上没多大影响。

本文出自 TENNFY博客,转载时请注明出处及相应链接。

本文永久链接: https://www.tennfy.com/548.html

下一篇文章:

上一篇文章:

10人参与了讨论

  1. xilouqingzhu 说:

    记得那个文章专题好久之前就可以滚动了吧,我以前也折腾了下跟随滚动的 :evil:

  2. 免费部落 说:

    这个不错,得试一试了!

  3. 垃圾站 说:

    垃圾站博客今天过来签到啦!时间:下午10:39:10

  4. tgxny 说:

    两个问题请教一下:
    一、库文件是不是jquery-1.3.2.min.js这个文件。
    一、我的网站是discuz论坛程序,需要调和jquery冲突,我把jquery-1.3.2.min.js文件里面的$全部更换成jq,然后引入的那段js代码里面的$也更换为jq了,可是还是没效果,请教一下?出什么问题呢?

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

5 + 9 = ?


您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

返回顶部