jQuery实现页面滚动时层智能浮动定位实例探讨


Posted in Javascript onMarch 29, 2013

各位兄弟可能碰到定位的问题,特别是在博客或者微博上面也会见到这个效果,于是产品人员在策划的时候就会要人家那种效果,,,而苦逼的我们需要去实现,实现实现。。。。。没办法,谁让我们是攻城师呢,攻吧:

效果图如下,滚动条下拉的时候黑色的块TOP为0;固定显示:
jQuery实现页面滚动时层智能浮动定位实例探讨
代码如下:

<!DOCTYPE html> 
<html > 
<head> 
<title>jQuery实现页面滚动时层智能浮动定位</title> 
<meta name="description" content="" /> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<style type="text/css"> 
*{ margin:0; padding:0;} 
.top{height:100px; background:#ccc;text-align:center; line-height:100px; font-size:40px;} 
body { font:12px/1.8 Arial; color:#666; height:2000px;} 
.float{width:200px; height:200px; border:1px solid #ffecb0; background-color:#000;position:absolute; right:10px; top:150px;} 
</style> 
</head> 
<body> 
<div class="top">导航啊导航啊导航</div> 
<div class="float" id="float"></div> 
<script type="text/javascript"> 
$.fn.smartFloat = function() { 
var position = function(element) { 
var top = element.position().top, pos = element.css("position"); 
$(window).scroll(function() { 
var scrolls = $(this).scrollTop(); 
if (scrolls > top) { 
if (window.XMLHttpRequest) { 
element.css({ 
position: "fixed", 
top: 0 
}); 
} else { 
element.css({ 
top: scrolls 
}); 
} 
}else { 
element.css({ 
position: pos, 
top: top 
}); 
} 
}); 
}; 
return $(this).each(function() { 
position($(this)); 
}); 
}; 
//绑定 
$("#float").smartFloat(); 
</script> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
js实现微信分享代码
Oct 11 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
表单验证的完整应用案例探讨
Mar 29 #Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 #Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 #Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 #Javascript
js 利用image对象实现图片的预加载提高访问速度
Mar 29 #Javascript
jquery无缝向上滚动实现代码
Mar 29 #Javascript
验证码按回车不变解决方法
Mar 29 #Javascript
You might like
PHP多线程类及用法实例
2014/12/03 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
javascript之Partial Application学习
2013/01/10 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
axios封装与传参示例详解
2020/10/18 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
原生JavaScript实现随机点名表
2021/01/14 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
Python中getpass模块无回显输入源码解析
2018/01/11 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
大四自我鉴定范文
2013/10/06 职场文书
给公司的建议书范文
2014/05/13 职场文书
教师专业自荐信
2014/05/31 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
高中生毕业评语
2014/12/30 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python