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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
封装的原生javascript弹出层代码
Sep 24 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
js实现动态时钟
Mar 12 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
表单验证的完整应用案例探讨
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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
PHP循环获取GET和POST值的代码
2008/04/09 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
jquery常用操作小结
2014/07/21 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
Python ldap实现登录实例代码
2016/09/30 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
Python之时间和日期使用小结
2019/02/14 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
python双向链表原理与实现方法详解
2019/12/03 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
几道Web/Ajax的面试题
2016/11/05 面试题
写给爸爸的道歉信
2014/01/15 职场文书
重阳节登山活动方案
2014/02/03 职场文书
国防教育标语
2014/10/08 职场文书
大学军训决心书
2015/02/05 职场文书
小学班级口号大全
2015/12/25 职场文书