<!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>
#test
{
position: absolute;
top: 10px;
right: 10px;
width: 130px;
height: 60px;
background: #555;
color: #fff;
font-size: 13px;
}
</style>
<script src="http://img.jb51.net/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>

Jquery几行代码解决跟随屏幕滚动DIV的更多相关文章

  1. 跟随屏幕滚动层、遮罩层、获取Div相对定位、整个屏幕、html文档的jquery基本操作

    一.层跟随屏幕滚动 <div style="width:120px;height:120px;border:1px solid red; position:absolute; left ...

  2. 代码优化实战,3行代码解决了一百个if else!

    事情是这样的,前段时间做代码review的时候,发现项目中有一个方法代码量超鸡儿多,而且大部分都是写的参数校验的代码,得,我们先抓着缕一缕需求先. 产品需求 找到产品要到了需求文档,需求是这样得: e ...

  3. 解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动

    一.导航栏或者页脚正常情况下固定在页面的相应位置,当页面滚动后,导航栏或者页脚固定在页面的顶部或者底部的情景 一般就是将该块的代码样式的position设置为fixed.固定在顶部的话,将top设置为 ...

  4. 7行代码解决P1441砝码称重(附优化过程)

    先贴上最终代码感受一下: #include <bits/stdc++.h> using namespace std; int i, N, M, wi[21], res = 0; int m ...

  5. Asp.Net Core-几行代码解决Razor中的嵌套if语句

    MVC开发中,经常会遇到在razor中插入简单的逻辑判断. @if (clientManager.IsAdmin) { if (!Model.Topic.Top) { <a asp-action ...

  6. 17行代码解决微信小程序图片延迟加载

    js 页面 Page({ data: { realScrollTop: 0,//页面滚动距离 driveHeight //屏幕高度可初始化设置 }, scroll(e){ if(e.detail.sc ...

  7. 八行代码解决八皇后问题(c++)

    说的有点夸装,实际上并不只是巴航代码,加上前面的变量声明之类的一共有40多行的样子吧,好像是在知乎上看到的,现在有时间再把它写下来: 其中用到了一些c++11特性,例如lambda 以及给予范围的 f ...

  8. Swift几行代码解决UITableView空数据视图问题

    tableView空数据问题 一般项目中tableView若数据为空时会有一个提示示意图 为了更好的管理这种提示示意图,笔者利用extension进行了简单的拓展 解决思路 利用swift面向协议的特 ...

  9. 6行代码解决golang TCP粘包

    转自:https://studygolang.com/articles/12483 什么是TCP粘包问题以及为什么会产生TCP粘包,本文不加讨论.本文使用golang的bufio.Scanner来实现 ...

随机推荐

  1. centos6.6配置rsync+sersync实现实时同步分布式多客户端分发同步

    1.sersync项目: sersync项目利用inotify与rsync技术实现对服务器数据实时同步到解决方案,其中inotify用于监控sersync所在服务器上文件系统的事件变化,rsync是目 ...

  2. 201521123107 《Java程序设计》第10周学习总结

    第10周作业-异常与多线程 1.本周学习总结 2.书面作业 1.finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? 只有try块中 ...

  3. list后台转化为JSON的方法ajax

    导入alibaba的fastJson包 后台: protected void doGet(HttpServletRequest request, HttpServletResponse respons ...

  4. 201521123011 《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 public ...

  5. 201521123034《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 1.对类的设计: - 将属性设计为私有 - 对属性初始化 - 类名和方法名要能体现他们的职责 ...

  6. java课设-计算数学表达式的程序,201521123050,51 团队

    1.团队名称.团队成员介绍 团队名称:天空 团队成员: 肖世松 谢庆圆 2.项目git地址 项目git地址 3.项目git提交记录截图(要体现出每个人的提交记录.提交说明) 4.项目功能架构图与主要功 ...

  7. Linux第一篇【介绍、安装Ubuntu、基本目录结构】

    Linux介绍 Linux:不管是不是我们这些学编程的都肯定会听说过这么一个系统,一般地,我们在PC端都是用Windows操作系统,那我们学习Linux操作系统有什么用呢??? 由于我们的JAVAEE ...

  8. mysql不能插入中文数据

    上次遇到的是向mysql插入中文数据,中文数据乱码了.这次直接就不能插入中文数据了!!!! 参考博文:http://blog.csdn.net/generalyy0/article/details/7 ...

  9. linux (1)基本知识/目录/磁盘格式/文件系统

    一.linux基本知识介绍1.命令行格式:(按两次tab可以知道有多少个可执行命令,我的有1980个,用户有1960个)[用户名@linux主机名 ~(当前目录)]$ 命令 选项 参数1 参数2[ro ...

  10. filter的两种使用方法

    1. 在模板中使用filter 我们可以直接在{{}}中使用filter,跟在表达式后面用 | 分割,语法如下: {{ expression | filter }} 也可以多个filter连用,上一个 ...