【jquery插件】jq_scrollFix滚动定位插件

【插件功能】
jq_scrollFix滚动定位插件:当用户拖动滚动条到一定距离的时候,目标对象定位在网站顶部。

【原理】
通过监控滚动事件并控制层的绝对定位后的lef,top属性。

【演示地址】
http://www.0773linji.com/jquery_plugs/jq_scrollFix/index.html

【插件参数】
relativeLeftId 必填,X参照物ID,默认''
relativeTopId 必填,Y参照物ID,默认''
tempLeftPx 相对X偏移位置补差值,默认0
tempTopPx 相对Y偏移位置补差值,默认0
maxTempHeight 滚动最大高度值,默认13000
fixedClass 必填,固定样式,默认fixedTop
ie6Class 必填,ie6处理原始样式,默认userPanel

【代码】

(function($) { 
$.fn.scrollFix = function(options) { 
var opts = $.extend({}, $.fn.scrollFix.defaults, options); 
return this.each(function(){
$this=$(this);
var leftPx;
var topPx;
if(opts.relativeLeftId)
{
leftPx=document.getElementById(opts.relativeLeftId).offsetLeft+opts.templeftPx; 
}else{leftPx=opts.templeftPx;}
if(opts.relativeTopId)
{
topPx=document.getElementById(opts.relativeTopId).offsetTop+$("#"+opts.relativeTopId).outerHeight()+opts.tempTopPx; 
}else{topPx=opts.tempTopPx;} 
$this.css("left",leftPx);
$this.css("top",topPx); 
window.onscroll = function()
{
var $scrollTop = document.documentElement.scrollTop;
if(jQuery.browser.msie&&jQuery.browser.version==6)
{
if($scrollTop>topPx && $scrollTop<topPx+opts.maxTempHeight)
{
$this.css("top",document.documentElement.scrollTop);
}else
{
$this.css("top",topPx);
}
}else
{
if($scrollTop>topPx && $scrollTop<topPx+opts.maxTempHeight)
{ 
$this.css("top","");
$this.addClass(opts.fixedClass);
}
else{
if($this.hasClass(opts.fixedClass))
{
$this.css("top",topPx);
$this.removeClass(opts.fixedClass).addClass(opts.ie6Class);
}
}

}
} 
}); 
}; 
$.fn.scrollFix.defaults = { 
relativeLeftId:'',//必填,X参照物ID
relativeTopId:'',//必填,Y参照物ID
templeftPx:0,//相对X偏移位置
tempTopPx:0,//相对Y偏移位置
maxTempHeight:13000,//滚动最大高度值
fixedClass:'fixedTop',//必填,固定样式
ie6Class:'userPanel'//必填,ie6处理原始样式
}; 
})(jQuery); 

jq_scrollFix.rar 

posted @ 2012-06-12 12:37  脉凌网络  阅读(505)  评论(1编辑  收藏  举报