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

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

淘宝产品列表 http://search1.taobao.com/browse/50010388/…

腾讯财经产业经济 http://finance.qq.com/industry/index.htm

如何实现？
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.jb51.net/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="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<div id="box1"><div id="box1_1">这里是定位层</div></div>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
<p><a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net">jb51.net</a> <a href="http://www.jb51.net"></a></p>
</div>
</body>
</html>

时间： 2024-10-31 04:38:07

jquery实现的超出屏幕时把固定层变为定位层的代码_jquery的相关文章

jquery定时滑出可最小化的底部提示层特效代码_jquery

html源代码: 复制代码 代码如下: <!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-equ

jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码_jquery

本文实例讲述了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果的方法.分享给大家供大家参考,具体如下: 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

jquery实现可自动判断位置的弹出层效果代码_jquery

本文实例讲述了jquery实现可自动判断位置的弹出层效果代码.分享给大家供大家参考.具体如下: 这是一款jquery实现的智能弹出层效果,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-auto-check-pos-alert-dlg-demo/ 具体代码如下: <!DOC

jQuery实现的超酷苹果风格图标滑出菜单效果代码_jquery

本文实例讲述了jQuery实现的超酷苹果风格图标滑出菜单效果代码.分享给大家供大家参考.具体如下: 这是一款超酷苹果风格图标滑出菜单,调用了jquery1.3.2的库文件,整个菜单动感十足,用在网站上增色不少. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-apple-style-ico-show-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

jQuery实现带有上下控制按钮的简单多行滚屏效果代码_jquery

本文实例讲述了jQuery实现带有上下控制按钮的简单多行滚屏效果代码.分享给大家供大家参考.具体如下: 这里使用了jQuery插件来实现最简单的多行文字滚屏效果,还带有上下滚动控制按钮,卷动速度,数值越大,速度越慢(毫秒),滚动的时间间隔是(毫秒),每次滚动的行数,默认为一屏,即父容器高度-- 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-up-down-scroll-src-style-codes/ 具体代码如下: <!DOCT

jquery实现像栅栏一样左右滑出式二级菜单效果代码_jquery

本文实例讲述了jquery实现像栅栏一样左右滑出式二级菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了jquery实现像栅栏一样的左右滑出式二级菜单,会向左或向右滑出,支持中英文,使用时别忘了引入jquery插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-right-show-nav-menu-codes/ 具体代码如下: <!DOCTYPE html> <head> <meta ht

jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码_jquery

本文实例讲述了jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码.分享给大家供大家参考.具体如下: 这里实现圆角表单,圆角输入框,无刷新验证,漂亮唯美,是对这款基于HTML5/CSS3/jQuery来实现的表单效果的简要概括,用HTML5可以实现很多超乎寻常的效果,从此你会喜欢上HTML5,会骂一下万恶的IE,到现在IE8还不支持HTML5,正悲哀着呢. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-htm

jQuery改变form表单的action,并进行提交的实现代码_jquery

jQuery改变form表单的action,并进行提交的实现代码 <s:form action="/student/traScore.action?method=list" id="queryForm" name="queryForm"> </s:form> //导出学生实训成绩 function exportScore(){ var path = "${ctx}/student/traScore.action?

浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题_jquery

今天用firefox调试一个用jquery里面的封装的方法与后台交互的时候,firefox死活不弹窗. 而之前用谷歌浏览器顺利通过.之后发现各自浏览器对浏览器默认值的处理是不一样的.总结: 如果返回的是json,应该带上该参数,返回的是text也一样. $.post(url,param,function(data),param);//最后一个参数param对应返回信息的类型,一般要带上,避免 因不同浏览器默认设置的不同造成的问题.