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>

赞 (0)

相关推荐

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

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

    非常好的一个用户体验实例.如果不明白的话就看下面的图片吧 淘宝产品列表 http://search1.taobao.com/browse/50010388/- 腾讯财经产业经济 http://finance.qq.com/industry/index.htm如何实现? scrollTop是什么?当元素内部的内容高度超过元素本身的高度时就会出现滚动条,随着拖动滚动条而被隐去的上面部分的高度就是scrollTop值. 这种定位层就是当页面触发onscroll事件时,取得scrollTop值并写入定位

  • 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

  • 让你的博客飘雪花超出屏幕依然看得见

    前些天,在园子里看到了使你的博客飘雪花的文章,就赶紧弄到自己的博客里来看看效果,别说,还真是漂亮啊.可是看了一会,就发现页面变得特别卡. 看了下代码后发现,原作者是在body中不停的插入多个小div雪花来向下慢慢飘,一直飘到body的底部后,将雪花移除. 但是,实际上,超出屏幕的页面我们又看不见,就算有雪花在飘又有什么意义呢. 于是,将原来的代码稍加修改,让他只是从屏幕的顶部飘落到屏幕底部(不是body的底部)后,就将雪花移除,另外将雪花改为fixed定位. 将页面刷新下,果然好多了.现把修改代

  • ios设备使用iframe宽度超出屏幕的解决方法

    场景 在做公司官网h5项目时遇到iframe在苹果X手机上右侧超出屏幕的问题,感觉像是被截断一样,但是在其他手机上显示正常. 分析 问题原因:页面a利用iframe嵌入了b,同时设置iframe的宽度为100% ,但是页面b的实际宽度要大于外层设置的100%. 正常情况下,页面b的显示宽度应该为外层赋予的100%,但是在ios上,当iframe内真实宽度大于外层给予的宽度的时候,显示的宽度则为真实宽度. 解决 1.给iframe的外层div添加样式:overflow: auto;-webkit-

  • IE8下jQuery改变png图片透明度时出现的黑边

    IE8下jQuery改变png图片透明度时出现的黑边

    png24格式的图片在用jQuery添加显示隐藏动画时发现,图片的半透明区域出现黑边? 在网上搜了搜主要有以下几种办法: 1.把图片保存成PNG-8格式. 2.把背景色一起切入并保存为JPG格式. 以上两种方法我试了试,好像效果并不好png8格式仍就会有黑边. 解决方法: 1.不要直接改变图片的透明度,而是给图片套个容器,去修改这个容器的透明度 2.给这个容器加个颜色相近的背景颜色(非常重要,解决bug的关键就在这一步,) 一般情况下,到此bug就解决了,如果还是有问题,请看下面: 3.给容器加

  • jQuery在页面加载时动态修改图片尺寸的方法

    本文实例讲述了jQuery在页面加载时动态修改图片尺寸的方法.分享给大家供大家参考.具体如下: $(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(

  • jQuery实现在下拉列表选择时获取json数据的方法

    本文实例讲述了jQuery实现在下拉列表选择时获取json数据的方法.分享给大家供大家参考.具体如下: function populateDropDown() { $.getJSON('/getData.aspx',{Name:$('#parm').val()},function(data){ var select = $('#DDLControl'); var options = select.attr('options'); $('option', select).remove(); $.e

  • jquery 实现滚动条下拉时无限加载的简单实例

    思路: 通过捕捉浏览器滚动条下拉事件,触发异步加载数据的js方法,实现数据的动态添加. 脚本: var lastId=0;//记录每一次加载时的最后一条记录id,跟您的排序方式有关. var isloading = false; $(window).bind("scroll", function () { if ($(document).scrollTop() + $(window).height() > $(document).height() - 10 &&

  • jQuery ajax方法传递中文时出现中文乱码的解决方法

    本文实例讲述了jQuery ajax方法传递中文时出现中文乱码的解决方法.分享给大家供大家参考,具体如下: 使用jQuery的ajax方法,在传递中文时出现中文乱码,按照以前的方法,修改了jquery文件中的ajaxSetting也不好使 复制代码 代码如下: sajaxSettings:{url:location.href,global:true,type:"GET",contentType:"application/x-www-form-urlencoded;charse

  • jQuery Ajax 加载数据时异步显示加载动画

    jQuery Ajax 加载数据时异步显示加载动画

    ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码 <div id="loadgif" style="width:66px;height:66px;position:absolute;top:50%;left:50%;"> <img alt="加载中..." src="../../Images/loading1.gif"/> </div> 在js脚本文件中首先把这个图片动画

随机推荐