【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);
站长帮手:在网络的世界里,我感觉自己无把不能。