<!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. Java中的异常和处理详解

    简介 程序运行时,发生的不被期望的事件,它阻止了程序按照程序员的预期正常执行,这就是异常.异常发生时,是任程序自生自灭,立刻退出终止,还是输出错误给用户?或者用C语言风格:用函数返回值作为执行状态?. ...

  2. 整个IT界可分为13块大领域

    IT界可以划分为13个领域 Location: NanJing

  3. 201521123082 《Java程序设计》第10周学习总结

    201521123082 <Java程序设计>第10周学习总结 标签(空格分隔): java 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. A ...

  4. 201521123073《Java程序设计》第2周学习总结

    1. 本周学习总结 1.学习了枚举类型的应用: 枚举也可以象一般的类一样添加方法和属性,你可以为它添加静态和非静态的属性或方法,这一切都象你在一般的类中做的那样. public enum Season ...

  5. 201521123103 《Java程序设计》 第一周学习总结

    一.本周学习总结 1.初步了解了Java的诞生及版本演进的过程. 2.认识了Java的三大平台:Java SE.Java EE.Java ME:学会安装JDK:Java SE是各应用平台的基础,分为四 ...

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

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 1.线程间的互斥访问(线程竞争):一些同时运行的线程需要访问共享数据,互斥访问是保证共享资源完整性的手段.实现方式 ...

  7. Rabbitmq集群安装配置

    Rabbitmq集群安装与配置 一.rabbitmq安装环境准备 1.安装环境准备 这里,我们以两个节点为例进行安装,一个节点为内存节点,另一个节点为硬盘节点,具体可根据自己需要分配节点. 安装系统 ...

  8. Maven第二篇【Idea下使用Maven】

    详情可参照详细的Maven教程-Idea环境下 值得追加的是:在修改web.xml路径的时候,那篇博文并没有给出绝对的路径-这里可能有些人不知道怎么写.我给出来参考 X:\Users\ozc\Desk ...

  9. java.lang.IllegalArgumentException: node to traverse cannot be null!

    查看HQL的语句是否写错了,是否有在From后面加空格.我就是没有加空格报了错误! return sessionFactory.getCurrentSession().createQuery(&quo ...

  10. 关于使用lombok遇到的问题

    在官网上下载了lombok.jar包以后,有两种安装方式 : 1. 双击下载下来的 JAR 包安装 lombok    我选择这种方式安装的时候提示没有发现任何 IDE,所以我没安装成功,我是手动安装 ...