jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层

ABCDKLPCVBU

ABCDKLPCVBU

2016-02-19 15:59

下面图老师小编要向大家介绍下jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

代码如下:
!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
titlejquery.text-effects/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
style
*{
margin:0;
padding:0;
}
#test{
position:absolute;
top:10px;
right:10px;
width:130px;
height:60px;
background:#555;
color:#fff;
font-size:13px;
}
/style
script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"/script
script language="javascript"
$(document).ready(function(){
var menuYloc = $("#test").offset().top;
$(window).scroll(function (){
var offsetTop = menuYloc + $(window).scrollTop() +"px";
$("#test").animate({top : offsetTop },{ duration:600 , queue:false });
});
});
/script
/head
body
h17行代码的跟随屏幕滚动层./h1
br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/
div id="test"Dev By CssRain.cnbr/Test ie6+,firefox3.0/div
br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/
br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/
/body
/html

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层

Web开发
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层

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

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

s8lol主宰符文怎么配

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

jquery 弹出层实现代码

Web开发
jquery 弹出层实现代码

js jquery做的图片连续滚动代码

Web开发
js jquery做的图片连续滚动代码

lol偷钱流符文搭配推荐

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

jquery 锁定弹出层实现代码

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

Jquery 弹出层插件实现代码

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

lolAD刺客新符文搭配推荐

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

GT 650M参数表及GeForce GT 650M规格特点

GT 650M参数表及GeForce GT 650M规格特点

什么是电脑cmos

什么是电脑cmos
下拉加载更多内容 ↓