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


Posted in Javascript onMay 21, 2009
<!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> 
<title>jquery.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://img.3water.com/jslib/jquery/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> 
    <h1>7行代码的跟随屏幕滚动层.</h1> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <div id="test">Dev By CssRain.cn<br/>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>
Javascript 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
May 21 #Javascript
W3C Group的JavaScript1.8 新特性介绍
May 19 #Javascript
JS backgroundImage控制
May 19 #Javascript
jQuery 源代码显示控件 (Ajax加载方式).
May 18 #Javascript
编写兼容IE和FireFox的脚本
May 18 #Javascript
innerText和innerHTML 一些问题分析
May 18 #Javascript
JS 页面自动加载函数(兼容多浏览器)
May 18 #Javascript
You might like
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
PHP缓存技术的使用说明
2011/08/06 PHP
关于PHP堆栈与列队的学习
2013/06/21 PHP
PHP7 list() 函数修改
2021/03/09 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
Django之模板层的实现代码
2019/09/09 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
香港礼品网站:GiftU eshop
2017/09/01 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
质检的岗位职责
2013/11/17 职场文书
一体化教学实施方案
2014/05/10 职场文书
庆元旦活动总结
2014/07/09 职场文书
食品安全承诺书范文
2014/08/29 职场文书
Python Flask实现进度条
2022/05/11 Python
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis