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来定义类的规范小结
Nov 19 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 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
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
jQuery插件 tabBox实现代码
2010/02/09 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
js实现双色球效果
2020/08/02 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
python实现神经网络感知器算法
2017/12/20 Python
python实现kMeans算法
2017/12/21 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
python+django+rest框架配置创建方法
2019/08/31 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
Python用Jira库来操作Jira
2020/12/28 Python
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
体育老师的教学自我评价分享
2013/11/19 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
中学生操行评语
2014/04/24 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
经典祝酒词大全
2015/08/12 职场文书
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python