首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery实现的超出屏幕时把固定层变为定位层的代码

Posted in Javascript onFebruary 23, 2010

非常好的一个用户体验实例。如果不明白的话就看下面的图片吧

淘宝产品列表 http://search1.taobao.com/browse/50010388/…
jquery实现的超出屏幕时把固定层变为定位层的代码

腾讯财经产业经济 http://finance.qq.com/industry/index.htm
jquery实现的超出屏幕时把固定层变为定位层的代码
如何实现？
scrollTop是什么？当元素内部的内容高度超过元素本身的高度时就会出现滚动条，随着拖动滚动条而被隐去的上面部分的高度就是scrollTop值。
这种定位层就是当页面触发onscroll事件时，取得scrollTop值并写入定位层CSS属性，使之保持位置。
下面是实例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>定位层</title> 
<script type="text/javascript" src="http://img.3water.com/jslib/jquery/jquery.js"></script> 
<style type="text/css"> 
body{padding:10px;margin:0;} 
#box{width:960px;margin:0 auto;} 
#box1{width:250px;height:25px;position:relative;} 
#box1_1{width:250px;height:25px;line-height:25px;background:#f00;color:#fff;} 
p{font-size:24px;margin:10px 0;} 
</style> 
<script type="text/javascript"> 
function tools(){ 
var top=$(document).scrollTop(); 
if(($.browser.msie==true)&&($.browser.version==6.0)){ 
if(top>168)$("#box1_1").css({position:"absolute",top:top-168}); 
}else{ 
if(top>168)$("#box1_1").css({position:"fixed",top:"-"&top+"px"}); 
} 
if(top<=168)$("#box1_1").css({position:"static",top:0}); 
} 
$(function(){ 
window.onscroll=tools; 
window.onresize=tools; 
}); 
</script> 
</head> 
<body> 
<div id="box"> 
<p>往下拖动滚动条↓<a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<div id="box1"><div id="box1_1">这里是定位层</div></div> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
<p><a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">3water.com</a> <a href="https://3water.com">三水点靠木</a></p> 
</div> 
</body> 
</html>

jquery实现的超出屏幕时把固定层变为定位层的代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 Javascript
vue 实现用户登录方式的切换功能
Apr 14 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 #Javascript
js下用层来实现select的title提示属性
Feb 23 #Javascript
jquery 锁定弹出层实现代码
Feb 23 #Javascript
javascript document.compatMode兼容性
Feb 23 #Javascript
js操作ajax返回的json的注意问题!
Feb 23 #Javascript
javascript入门基础之私有变量
Feb 23 #Javascript
第一个JavaScript入门基础 document.write输出
Feb 22 #Javascript
self(1) MapReduce(1) Normal From(1) uniapp(4) capture(1) JSON(10) SpringBoot(22) Qlabel(1) css3 (2) MybatisPlus(2)
You might like
PHP的面试题集,附我的答案和分析（一）
2006/11/19 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
javascript校验价格合法性实例（必须输入2位小数）
2014/05/05 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
python局部赋值的规则
2013/03/07 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
python for 循环获取index索引的方法
2019/02/01 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
C#公司笔试题
2014/03/28 面试题
Java面试题：说出如下代码的执行结果
2015/10/30 面试题
赔偿协议书范本
2014/04/15 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
vue首次渲染全过程
2021/04/21 Vue.js