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 相关文章推荐
直接生成打开窗口代码,不必下载
May 14 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
AngularJS入门教程(一):静态模板
Dec 06 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
Angular 路由route实例代码
Jul 12 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
前端vue如何使用高德地图
Nov 05 Javascript
vue 中的动态传参和query传参操作
Nov 09 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 include任意文件或URL介绍
2014/04/29 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
js数组去重的hash方法
2016/12/22 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
python中对list去重的多种方法
2014/09/18 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
python解释器安装教程的方法步骤
2020/07/02 Python
Python 操作 MySQL数据库
2020/09/18 Python
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
卫校毕业生自我鉴定
2013/10/31 职场文书
社区好人好事材料
2014/12/26 职场文书
服务明星事迹材料
2014/12/29 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
工作时间调整通知
2015/04/24 职场文书
航班延误投诉信
2015/07/02 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
新员工入职感言范文!
2019/07/04 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js