<!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. PS各个工具的字母快捷键和英…

    原文地址:PS各个工具的字母快捷键和英文全名作者:Tycho     选框-Marquee(M)     移动-move(V)     套索-Lasso(L)     魔棒-Wand(W) 喷枪-in ...

  2. 对#ifndef的理解

    由于对#ifndef的用法不太理解,在询问了老师#ifndef的含义以及查找资料后,对#ifndef总结了以下几点: <1> #ifndef是宏定义的一种,是三种预处理功能(宏定义,文件包 ...

  3. 蓝桥杯PREV-11：横向打印二叉树

    嗯,没错我还报了蓝桥杯. 这是题目 问题描述 二叉树可以用于排序.其原理很简单:对于一个排序二叉树添加新节点时,先与根节点比较,若小则交给左子树继续处理,否则交给右子树. 当遇到空子树时,则把该节点放 ...

  4. Java 第七周总结

    1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 我们知道ArrayList是允许重复的,有序的元素的集合,但当我们想用它来放 ...

  5. 201521123010 《Java程序设计》第7周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: XMind 2. 书面作业 ①ArrayList代码分析 1.1 解释ArrayList的contains源代码 ...

  6. 201521123069 《Java程序设计》 第5周学习总结

    1. 本章学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 参考资料: 百度脑图 XMind 1.1 1.2 (1)用Arrays.sort ...

  7. java201521123118《java程序设计》第5周总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1. 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过 ...

  8. Java-错误处理机制学习（一）异常处理

    注意:本文介绍Java中的异常处理理论知识及相关语法结构,对于实际应用来说是万万不够的.关于如何高效地使用异常,请查看Java-高效地使用Exception-实践. 异常处理的思想是,当应用程序处于异 ...

  9. 201521123042 《Java程序设计》第12周学习总结

    本次作业参考文件 正则表达式参考资料 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String ...

  10. 201521123075 《Java程序设计》第11周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问, ...