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

41715098

41715098

2016-02-19 13:49

今天图老师小编给大家精心推荐个jquery实现的超出屏幕时把固定层变为定位层的代码教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~
非常好的一个用户体验实例。如果不明白的话就看下面的图片吧

淘宝产品列表 http://search1.taobao.com/browse/50010388/…
taobao浮动层实例

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

如何实现?
scrollTop是什么?当元素内部的内容高度超过元素本身的高度时就会出现滚动条,随着拖动滚动条而被隐去的上面部分的高度就是scrollTop值。
这种定位层就是当页面触发onscroll事件时,取得scrollTop值并写入定位层CSS属性,使之保持位置。
下面是实例代码

代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
!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.poluoluo.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(top168)$("#box1_1").css({position:"absolute",top:top-168});
}else{
if(top168)$("#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.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
div id="box1"div id="box1_1"这里是定位层/div/div
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
pa href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"poluoluo.com/a a href="http://www.poluoluo.com"/a/p
/div
/body
/html

展开更多 50%)
分享

猜你喜欢

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

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

jquery 弹出层实现代码

Web开发
jquery 弹出层实现代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JQuery 遮罩层实现(mask)实现代码

Web开发
JQuery 遮罩层实现(mask)实现代码

jquery 锁定弹出层实现代码

Web开发
jquery 锁定弹出层实现代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Jquery 弹出层插件实现代码

Web开发
Jquery 弹出层插件实现代码

css层固定位置练习

Web开发
css层固定位置练习

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

SQLCLR(五)聚合

SQLCLR(五)聚合

几个比较经典常用的jQuery小技巧

几个比较经典常用的jQuery小技巧
下拉加载更多内容 ↓