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 相关文章推荐
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
vue.js指令v-for使用以及下标索引的获取
Jan 31 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
综合图片计数器
2006/10/09 PHP
PHP下对字符串的递增运算代码
2010/08/21 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
PHP xpath()函数讲解
2019/02/11 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
ExpressJS入门实例
2015/01/14 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
尽职尽责村干部自我鉴定
2014/01/23 职场文书
宣传普通话标语
2014/06/27 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL