js 固定悬浮效果实现思路代码


Posted in Javascript onAugust 02, 2013
<script type="text/javascript"> 
(function($){ 
var ele_fix = $("#div_right"); //浮动窗口 
var _main = $(".main"); //浮动区域 
var ele_offset_top = ele_fix.offset().top; //浮动区域高度 
$(window).scroll(function(){ 
var scro_top = $(this).scrollTop(); //当前高度 
var fix_foot_pos = parseInt(ele_fix.height())+parseInt(scro_top)-10; //浮动框最底部到最顶部高度 
var mainpos = parseInt(_main.offset().top)+parseInt(_main.height()); 
if(scro_top <= ele_offset_top&&fix_foot_pos<mainpos){ 
ele_fix.css({position: "static", top: -10}); 
}else if(scro_top>ele_offset_top&&fix_foot_pos<mainpos){ 
ele_fix.css({position: "fixed", top: -10}); 
}else if(scro_top>ele_offset_top&&fix_foot_pos>mainpos){ 
var posi = mainpos-fix_foot_pos-10; 
ele_fix.css({position: "fixed", top: posi}); 
} 
}); 
/* 
//方案二 
$(window).bind("scroll",function() { 
var temp = '1165'; 
//判断往下滚 
if ($(document).scrollTop() > temp) { //如果大于这个高度,就置顶 
flag = false; 
$('#div_right').css({'position':'fixed', 'top':'-10px', 'margin-top':'0px'}); 
} 
if ($(document).scrollTop() <= temp) { //如果小于这个高度,则恢复原来状态 
flag = true; 
$('#div_right').css('position',''); 
} 
}); 

*/ 
})(jQuery); 
</script>
Javascript 相关文章推荐
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
微信小程序实现日历签到
Sep 21 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 #Javascript
页面右下角弹出提示框示例代码js版
Aug 02 #Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 #Javascript
js获取location.href的参数实例代码
Aug 02 #Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 #Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 #Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 #Javascript
You might like
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
PHP 反射(Reflection)使用实例
2015/05/12 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
js异或加解密效果代码
2008/06/25 Javascript
javascript常见操作汇总
2014/09/03 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
js 函数性能比较方法
2020/08/24 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
python实现无证书加密解密实例
2014/10/27 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
python3去掉string中的标点符号方法
2019/01/22 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
Python sublime安装及配置过程详解
2020/06/29 Python
python raise的基本使用
2020/09/10 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
护理专业毕业生自荐信范文
2014/01/05 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
教师调动申请报告
2015/05/18 职场文书
2016特色励志班级口号
2015/12/24 职场文书
导游词之日月潭
2019/11/05 职场文书
python中%格式表达式实例用法
2021/06/18 Python