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 相关文章推荐
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
Angular父组件调用子组件的方法
Apr 02 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
js模拟实现烟花特效
Mar 10 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数据流应用的简单例子
2012/06/01 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
javascript中Object使用详解
2015/01/26 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
JavaScript常用工具函数大全
2020/05/06 Javascript
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
django框架如何集成celery进行开发
2017/05/24 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
对python的文件内注释 help注释方法
2018/05/23 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
python实现两个文件夹的同步
2019/08/29 Python
python机器学习库xgboost的使用
2020/01/20 Python
python实现门限回归方式
2020/02/29 Python
python中PyQuery库用法分享
2021/01/15 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
医生进修自我鉴定
2014/01/19 职场文书
社区两委对照检查材料
2014/08/23 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP