<!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. Python输入输出练习，运算练习，turtle初步练习

    Hello World! 简单交互(交互式,文件式)教材P19 radius=25 area=3.1415*radius*radius print(area) print('{:.2f}'.forma ...

  2. unity3d 初学者遇到的坑(提醒自己不要范同样的错误)

    使用NGUI的过程中,总是会发生一些就像我这样的初学者遇到的坑:一直以为在创建  一直以为图中的文字Depth深度大于beijingheitu的深度,会显示在beijingheitu下所有子物体之上, ...

  3. java课程设计——博客作业教学数据分析系统（201521123083 戴志斌）

    目录 一.团队课程设计博客链接 二.个人负责模块或任务说明 三.自己的代码提交记录截图 四.自己负责模块或任务详细说明 五.课程设计感想 (题外话,终于可以用markdown建目录) 一.团队课程设计 ...

  4. 团队作业4——第一次项目冲刺（Alpha版本） Day6

    首先和助教及老师表示抱歉,博客确实当时就写了,但是一直不算写好,因为这几天卡住了,预计实现的功能实现不了,进度跟不上,现在也在寻求解决方法. 1.站立式会议: 2. Leangoo任务分解图: 3.任 ...

  5. java--整理下关于static关键字的知识

    如果将域定义为static,每个类中只有一个这样的域.而每一个对象对于所有的实例域却都有自己的一份拷贝.--<java核心技术> 使用static的两种情形:1.只想为某特定域分配单一存储 ...

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

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

  7. GSON速学必会

    一. GSON 简介 GSON是一个用Java语言编写的用于处理JSON数据格式的开源应用程序编程接口项目.它将Java对象转换为JSON表示.还可以用于将JSON字符串转换为等效的Java对象. g ...

  8. 单例模式（Singleton）看了就懂

    单例,故名思议,一个只能创建一个实例的类. 单例被广泛应用于Spring的bean(默认).线程池.数据库连接池.缓存,还有其他一些无状态的类如servlet. 一个没必要多例的类实现了单例可以节约空 ...

  9. Hibernate第十篇【Hibernate查询详解、分页查询】

    前言 在Hibernate的第二篇中只是简单地说了Hibernate的几种查询方式-.到目前为止,我们都是使用一些简单的主键查询阿-使用HQL查询所有的数据-.本博文主要讲解Hibernate的查询操 ...

  10. [07] String字符串

    1.相同又不同的字符串 String str1 = new String("String"); String str2 = "String"; String s ...