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_10_对象模型
Oct 16 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 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
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
php实现无限级分类
2014/12/24 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
php实现记事本案例
2020/10/20 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
使用python分析git log日志示例
2014/02/27 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
英国二手物品交易网站:Preloved
2017/10/06 全球购物
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
linux面试题参考答案(10)
2013/11/04 面试题
学年末自我鉴定
2014/01/21 职场文书
授权委托书样本
2014/04/03 职场文书
委托书的格式
2014/08/01 职场文书
工作表扬信范文
2015/01/17 职场文书
详解Python常用的魔法方法
2021/06/03 Python
关于vue-router-link选择样式设置
2022/04/30 Vue.js