编程 Javascript

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高级技巧

Dec 20 Javascript

JQuery的Ajax跨域请求原理概述及实例

Apr 26 Javascript

全面解析Bootstrap弹窗的实现方法

Dec 01 Javascript

JavaScript实现数据类型的相互转换

Mar 06 Javascript

Vue.js实现的表格增加删除demo示例

May 22 Javascript

vue二级菜单导航点击选中事件的方法

Sep 12 Javascript

vue实现可视化可拖放的自定义表单的示例代码

Mar 20 Javascript

详解VSCode配置启动Vue项目

May 14 Javascript

微信小程序生成携带参数的二维码

Oct 23 Javascript

使用layui前端框架弹出form表单以及提交的示例

Oct 25 Javascript

在VUE中使用lodash的debounce和throttle操作

Nov 09 Javascript

vue中h5端打开app(判断是安卓还是苹果)

Feb 26 Vue.js

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