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 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
jquery 笔记 事件
Nov 02 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
javascript数组排序汇总
Jul 07 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
对layui中的onevent 和event的使用详解
Sep 06 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新手上路(六)
2006/10/09 PHP
用header 发送cookie的php代码
2007/03/16 PHP
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
php实现的顺序线性表示例
2019/05/04 PHP
文本框文本自动补全效果示例分享
2014/01/19 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
JS随机密码生成算法
2019/09/23 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
python编码总结(编码类型、格式、转码)
2016/07/01 Python
python读取oracle函数返回值
2016/07/18 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
季度思想汇报
2014/01/01 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
三方股东合作协议书
2014/10/28 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers