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

JavaScript下利用fso判断文件是否存在的代码

Dec 11 Javascript

jquery load事件(callback/data)使用方法及注意事项

Feb 06 Javascript

javascript实现焦点滚动图效果具体方法

Jun 24 Javascript

document节点对象的获取方式示例介绍

Dec 24 Javascript

jQuery显示和隐藏常用的状态判断方法

Jan 29 Javascript

jQuery中$.each使用详解

Jan 29 Javascript

jQuery实现表格颜色交替显示的方法

Mar 09 Javascript

jquery实现的用户注册表单提示操作效果代码分享

Aug 28 Javascript

JQuery组件基于Bootstrap的DropDownList（完整版）

Jul 05 Javascript

jQuery获取浏览器类型和版本号的方法

Jul 05 Javascript

浅谈Angular2 模块懒加载的方法

Oct 04 Javascript

javascript中如何判断类型汇总

May 14 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