滚动fixed定位插件 ,依赖jquery
2013-12-09 15:17
369 查看
滚动fixed定位插件 ,依赖jquery
修正版本2
//fix固定定位 function Fixed(moveObj,relativeObj){ /*参数说明 * @moveObj object 要移动的对象 --最好完整的结构 * @relativeObj object 移动时的相对对象 --最好是最外层的容器 */ if($(moveObj).height()<$(relativeObj).height()){ var _top=$(moveObj).offset().top; var limitTop=$(relativeObj).offset().top + $(relativeObj).height()- $(moveObj).height(); var diffHeight=$(relativeObj).height()-$(moveObj).height(); //需要移动的对象高度小于相对对象的高度 $(window).scroll(function(){ if ( $(window).scrollTop() > _top && limitTop>=0 && diffHeight>=0 ) {//如果滚动的高度大于 moveObj的上边距 就移动 $(moveObj).css({'position':'fixed','top':'0px'}) } else{//如果滚动的高度不大于 moveObj就不动 $(moveObj).css({'position':'absolute','top':_top+'px'}) } if($(window).scrollTop()> limitTop && limitTop>=0 && diffHeight>=0 ){//限定最大的scroll高度 $(moveObj).css({'position':'absolute','top':$(window).scrollTop()-($(window).scrollTop()-limitTop)+'px'}) } }) } }
修正版本2
function Fixed(moveObj,relativeObj){ var offset_top=$(moveObj).offset().top; var offset_left=$(moveObj).offset().left; var relative_left=$(moveObj).position().left; var limitTop=$(relativeObj).offset().top + $(relativeObj).outerHeight()- $(moveObj).outerHeight(); $(window).scroll(function(){ var top=$(window).scrollTop(); if($(window).scrollTop() > offset_top){ $(moveObj).css({'position':'fixed','top':'0px','left':offset_left+'px','zIndex':'1'}); }else{//如果滚动的高度不大于 moveObj就不动 $(moveObj).removeAttr('style'); } if($(window).scrollTop()> limitTop && limitTop>=0 ){//限定最大的scroll高度 $(moveObj).css({'position':'absolute','top':limitTop-offset_top+'px','left':relative_left+'px'}) } }) }
相关文章推荐
- 【jquery插件】jq_scrollFix滚动定位插件
- Jquery定位插件,固定元素在页面某个位置,不随滚动条滚动
- posfixed.js(修改为任意页面停靠)滚动固定jquery插件
- 【代码片段】jQuery实现页面滚动时层智能浮动定位-Fixed Floating Elements
- jquery自由定位层,随滚动条滚动层插件,对联插件,广告插件
- jQuery实现页面滚动时元素智能定位
- ios系统fixed定位元素滚动后无法点击
- js页面滚动浮动层智能定位(jQuery)实例页面
- fullpage(jQuery全屏滚动插件)插件的使用
- Google分析用户页面滚动深度分析jQuery插件 - jQuery Scroll Depth
- jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
- 一款很好用的jquery图片滚动插件-jquery.flexslider.js
- 20 个用于处理页面滚动效果的 jQuery 插件
- 滚动 CSS3 鼠标滚轮滚动插件jQuery Smoove.js
- jquery 页面滚动到底部自动加载插件集合
- 基于jquery的图片滚动插件代码
- jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
- jQuery 数字滚动插件
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery高性能自己定义滚动栏美化插件