2012-08-20 928 评论

侧栏固定浮动层代码

上面的图片是在ie6.0下的，要看详细效果可以看看本站侧拉
本方法是运用jquery的一个组件scrollFollow经过测试ie6.0 ie8.0 firefox oprea均可以使用，其他的浏览器没用测试过

js代码如下


$.fn.extend({
	scrollFollow: function(d) {
		d = d || {};
		d.container = d.container || $(this).parent();
		d.bottomObj = d.bottomObj || '';
		d.bottomMargin = d.bottomMargin || 0;
		d.marginTop = d.marginTop || 0;
		d.marginBottom = d.marginBottom || 0;
		d.zindex = d.zindex || 9999;
		var e = $(window);
		var f = $(this);
		if (f.length &lt; = 0) {
			return false
		}
		var g = f.position().top;
		var h = d.container.height();
		var i = f.css("position");
		if (d.bottomObj == '' || $(d.bottomObj).length &lt;= 0) {
			var j = false
		} else {
			var j = true
		}
		e.scroll(function(a) {
			var b = f.height();
			if (f.css("position") == i) {
				g = f.position().top
			}
			scrollTop = e.scrollTop();
			topPosition = Math.max(0, g - scrollTop);
			if (j == true) {
				var c = $(d.bottomObj).position().top - d.marginBottom - d.marginTop;
				topPosition = Math.min(topPosition, (c - scrollTop) - b)
			}
			if (scrollTop &gt; g) {
				if (j == true &amp;&amp; (g + b &gt; c)) {
					f.css({
						position: i,
						top: g
					})
				} else {
					if (window.XMLHttpRequest) {
						f.css({
							position: "fixed",
							top: topPosition + d.marginTop,
							'z-index': d.zindex
						})
					} else {
						f.css({
							position: "absolute",
							top: scrollTop + topPosition + d.marginTop + 'px',
							'z-index': d.zindex
						})
					}
				}
			} else {
				f.css({
					position: i,
					top: g
				})
			}
		});
		return this
	}
});

$(document).ready(function(){
  $("#rollbox").scrollFollow({
		bottomObj: '#footer',
		marginTop: 0,
		marginBottom: 0
	});

});

$.fn.extend({

scrollFollow: function(d) {

d = d || {};

d.container = d.container || $(this).parent();

d.bottomObj = d.bottomObj || '';

d.bottomMargin = d.bottomMargin || 0;

d.marginTop = d.marginTop || 0;

d.marginBottom = d.marginBottom || 0;

d.zindex = d.zindex || 9999;

var e = $(window);

var f = $(this);

if (f.length < = 0) {

return false

}

var g = f.position().top;

var h = d.container.height();

var i = f.css("position");

if (d.bottomObj == '' || $(d.bottomObj).length <= 0) {

var j = false

} else {

var j = true

}

e.scroll(function(a) {

var b = f.height();

if (f.css("position") == i) {

g = f.position().top

}

scrollTop = e.scrollTop();

topPosition = Math.max(0, g - scrollTop);

if (j == true) {

var c = $(d.bottomObj).position().top - d.marginBottom - d.marginTop;

topPosition = Math.min(topPosition, (c - scrollTop) - b)

}

if (scrollTop > g) {

if (j == true && (g + b > c)) {

f.css({

position: i,

top: g

})

} else {

if (window.XMLHttpRequest) {

f.css({

position: "fixed",

top: topPosition + d.marginTop,

'z-index': d.zindex

})

} else {

f.css({

position: "absolute",

top: scrollTop + topPosition + d.marginTop + 'px',

'z-index': d.zindex

})

}

} else {

f.css({

position: i,

top: g

})

}

});

return this

}

});

$(document).ready(function(){

$("#rollbox").scrollFollow({

bottomObj: '#footer',

marginTop: 0,

marginBottom: 0

});

rollbox是要固定浮动层的样式，#footer是固定浮动层滑动到此是停止滑动
将这个代码放到JS文件里面，然后在header.php调用这个js文件,顺便调用下jquery.js

CSS样式如下，为了支持IE浏览器


#sidebar #rollbox{	background:#fff;
	display:inline-block;
	position:static;
	_width:285px;
	+width:285px}

#sidebar #rollbox{ background:#fff;

display:inline-block;

position:static;

_width:285px;

+width:285px}

详细调用是这样的


<ul id="rollbox" class="clear">
	<li class="widget">
<div class="widget_t"></div>
<div class="widget_c">
<div class="item_title">关于本站
About</div>
新浪微博：<a href="https://weibo.com/musictip" target="_blank">weibo.com/musictip</a>
收藏本微博可以让你更快的发掘新的音乐
订阅本站：<a href="https://18air.top/feed" target="_blank">18air.top/feed</a>
邮箱：wangli_smile#hotmail.com
<a href="https://sighttp.qq.com/authd?IDKEY=4853539743f28eb5eaa887350b7260e8c57d53d34ef46e2e" target="_blank"><img title="联系我" src="https://wpa.qq.com/imgd?IDKEY=4853539743f28eb5eaa887350b7260e8c57d53d34ef46e2e&amp;pic=43" alt="联系我" border="0" /></a>
联系QQ：281452390</div>
<div class="widget_b"></div></li>
	<li class="widget">
<div class="widget_t"></div>
<div class="widget_c">
<div class="item_title">淘随享
TaoBao Box</div>
<div class="widget_content"><embed id="21566128" src="https://img.uu1001.cn/bcv3.swf?v=20120313" type="application/x-shockwave-flash" width="260" height="260" name="21566128"/></div>
</div>
<div class="widget_b"></div></li>
</ul>