posfixed.js(修改为任意页面停靠)滚动固定jquery插件

14 篇文章 0 订阅
$(document).ready(function() {
    $("#ho-xdiv").posfixed({
    distance: 0, //top值,高度
    pos: "top",
    type: "while",
    hide: false
    })
});

js代码用于页面,也可写在js文件里。注意#ho-xdiv

posfixed.js代码如下:(修改过)

(function($){$.extend($.fn,{posfixed:function(configSettings){var settings={direction:"top",type:"while",hide:false,distance:0};$.extend(settings,configSettings);jQuery.browser={};(function(){jQuery.browser.msie=false;jQuery.browser.version=0;if(navigator.userAgent.match(/MSIE ([0-9]+)./)){jQuery.browser.msie=true;jQuery.browser.version=RegExp.$1}})();if($.browser.msie&&$.browser.version==6.0){$("html").css("overflow","hidden");$("body").css({height:"100%",overflow:"auto"})}var obj=this;var initPos=$(obj).offset().top;var initPosLeft=$(obj).offset().left;var anchoredPos=settings.distance;if(settings.type=="while"){if($.browser.msie&&$.browser.version==6.0){$("body").scroll(function(event){var objTop=$(obj).offset().top-$("body").scrollTop();if(objTop<=settings.distance){$(obj).css("position","absolute");$(obj).css("top",settings.distance+"px");$(obj).css("left",initPosLeft+"px")}if($(obj).offset().top<=initPos){$(obj).css("position","static")}})}else{$(window).scroll(function(event){if(settings.direction=="top"){var objTop=$(obj).offset().top-$(window).scrollTop();if(objTop<=settings.distance){$(obj).css("position","fixed");$(obj).css(settings.direction,settings.distance+"px")}if($(obj).offset().top<=initPos){$(obj).css("position","static")}}else{var objBottom=$(window).height()-$(obj).offset().top+$(window).scrollTop()-$(obj).outerHeight();if(objBottom<=settings.distance){$(obj).css("position","fixed");$(obj).css(settings.direction,settings.distance+"px")}if($(obj).offset().top>=initPos){$(obj).css("position","static")}}})}}if(settings.type=="always"){if($.browser.msie&&$.browser.version==6.0){if(settings.hide){$(obj).hide()}$("body").scroll(function(event){if($("body").scrollTop()>300){$(obj).fadeIn(200)}else{$(obj).fadeOut(200)}});$(obj).css("position","absolute");$(obj).css(settings.direction,settings.distance+"px");if(settings.tag!=null){if(settings.tag.obj!=null){if(settings.tag.direction=="right"){$(obj).css("left",(settings.tag.obj.offset().left+settings.tag.obj.width()+settings.tag.distance)+"px");$(window).resize(function(){$(obj).css("left",(settings.obj.tag.offset().left+settings.tag.obj.width()+settings.tag.distance)+"px")})}else{console.log(settings.tag.obj.offset().left-settings.tag.obj.width()-settings.tag.distance);$(obj).css("left",(settings.tag.obj.offset().left-$(obj).outerWidth()-settings.tag.distance)+"px");$(window).resize(function(){$(obj).css("left",(settings.tag.obj.offset().left-$(obj).outerWidth()-settings.tag.distance)+"px")})}}else{$(obj).css(settings.tag.direction,settings.tag.distance+"px")}}}else{if(settings.hide){$(obj).hide()}$(window).scroll(function(event){if($(window).scrollTop()>300){$(obj).fadeIn(200)}else{$(obj).fadeOut(200)}});var objLeft=$(obj).offset().left;$(obj).css("position","fixed");$(obj).css(settings.direction,settings.distance+"px");if(settings.tag!=null){if(settings.tag.obj!=null){if(settings.tag.direction=="right"){$(obj).css("left",(settings.tag.obj.offset().left+settings.tag.obj.width()+settings.tag.distance)+"px");$(window).resize(function(){$(obj).css("left",(settings.obj.tag.offset().left+settings.tag.obj.width()+settings.tag.distance)+"px")})}else{console.log(settings.tag.obj.offset().left-settings.tag.obj.width()-settings.tag.distance);$(obj).css("left",(settings.tag.obj.offset().left-$(obj).outerWidth()-settings.tag.distance)+"px");$(window).resize(function(){$(obj).css("left",(settings.tag.obj.offset().left-$(obj).outerWidth()-settings.tag.distance)+"px")})}}else{$(obj).css(settings.tag.direction,settings.tag.distance+"px")}}}}}})})(jQuery);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值