编程 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 相关文章推荐

Jquery each方法跳出循环,并获取返回值(实例讲解)

Dec 12 Javascript

js jquery分别实现动态的文件上传操作按钮的添加和删除

Jan 13 Javascript

用jquery模仿的a的title属性的例子

Oct 22 Javascript

JavaScript学习笔记之DOM基础 2.4

Aug 14 Javascript

将JSON字符串转换成Map对象的方法

Nov 30 Javascript

js微信支付实现代码

Dec 22 Javascript

支持移动端原生js轮播图

Feb 16 Javascript

微信小程序实现实时圆形进度条的方法示例

Feb 24 Javascript

JavaScript函数节流的两种写法

Apr 07 Javascript

bootstrap时间控件daterangepicker使用方法及各种小bug修复

Oct 25 Javascript

JS实现移动端点击按钮复制文本内容

Jul 28 Javascript

vue封装可复用组件confirm,并绑定在vue原型上的示例

Oct 31 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