编程 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 & DHTML 实例编程（教程）DOM基础和基本API

Jun 02 Javascript

javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick

Feb 04 Javascript

Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法

Dec 06 Javascript

jquery设置表单元素为不可用的简单代码

Jul 04 Javascript

JavaScript表单验证实现代码

May 22 Javascript

AngularJS 异步解决实现方法

Jun 12 Javascript

vue实现页面滚动到底部刷新

Aug 16 Javascript

小程序实现层叠卡片滑动效果

Aug 26 Javascript

js实现计时器秒表功能

Dec 16 Javascript

浅谈javascript如何获取文件后缀名

Aug 07 Javascript

在vue中axios设置timeout超时的操作

Sep 04 Javascript

js实现简易ATM功能

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