wordpress边栏底部随页面滚动实现方法

经常在人家博客上看见这种效果:文章太长,导致到文章底部的时候边栏早已空了,很不好看,遂各种搜索,但搜索到的结果几乎都一样,但是不是很适合本博。。。

原因有二:

1.本博的模版边栏每个模块没有没有ID,都是一样的class。无法确定哪个跟随滚动。

2.本博的模版边栏每个模块没有宽度限制,导致一旦浮动,宽度会变化。很难看。

所以对浮动代码做如下修改,旨在抛砖引玉,实现思路可以学习,但是要有修改成自己适合的能力。

[php]

$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position"), width = element.css("width");
//alert(width);
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls+25 > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 15,
width: "286px"
});
}
else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: "static",
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
//绑定,将引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC"
$("#themify-links-2").parent().smartFloat();

[/php]

上面代码对网上代码修改的地方有:

1.没有固定的ID,所以用.parent()函数来获取父节点。

2.在自定义的函数中对属性新增了宽度(width),使下面可以对元素的宽度做限制。

另外需要注意,11行和12行,top和width在定义的时候用的方法不一样,数据格式也不一样。

element.position().top是上边距的值,是数字15

element.css("width")是CSS属性width的属性值,是字符串286px

希望大家共同进步!

还没有评论,快来抢沙发!

发表评论

  • 😉
  • 😐
  • 😡
  • 😈
  • 🙂
  • 😯
  • 🙁
  • 🙄
  • 😛
  • 😳
  • 😮
  • emoji-mrgree
  • 😆
  • 💡
  • 😀
  • 👿
  • 😥
  • 😎
  • ➡
  • 😕
  • ❓
  • ❗
  • 64 queries in 0.377 seconds