posfixed.js(修改为任意页面停靠)滚动固定jquery插件
2017-08-28 11:06
716 查看
$(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()+setti 8fc3 ngs.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);
相关文章推荐
- 【jQuery插件】-----页面滚动时动画wow.js
- div随页面滚动遇顶固定的两种方法(js&jQuery)
- Waypoints.js Javascript/jQuery 页面滚动监听插件
- 页面滚动图片等元素动态加载插件jquery.scrollLoading.js
- Jquery定位插件,固定元素在页面某个位置,不随滚动条滚动
- 点击隐藏汉堡菜单、单页面导航插件—jquery.singlePageNav.min.js、
- jquery插件:任意位置浮动固定层(09-11-05更新插件)
- js滚动页面到固定位置进行操作
- scrollToFixed.js——导航...滚动固定
- 学习--jquery 自定义插件 页面按照模块 垂直滚动
- jQuery全屏滚动插件fullPage.js
- IE6解决无法实现position:fixed浮动层固定在滚动页面(无抖动)
- jquery 插件 任意位置浮动固定层
- jQuery打印插件(jQuery.print.js)在单页面中,打印的是首页的信息而不是iframe的内容
- jQuery滚动插件scrollable.js用法分析
- 网站开发常用jQuery插件总结(12)固定元素插件scrolltofixed
- 学习使用jquery iScroll.js移动端滚动条插件
- 第32款插件:第26款插件:jcarousellite.js 基于Jquery的无缝“垂直滚动”图片插件
- jquery.messager.js插件导致页面抖动的解决方法
- jquery.messager.js插件导致页面抖动的解决方法