<!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. Swiper+JS 上拉刷新

    JS // 上拉刷新                        var page = 2;            var isAjax = true;//加载数据前状态            $( ...

  2. JavaScript中你所不知道的Object（二）--Function篇

    上一篇(JavaScript中你所不知道的Object(一))说到,Object对象有大量的内部属性,而其中多数和外部属性的操作有关.最后留了个悬念,就是Boolean.Date.Number.Str ...

  3. 转：jquery 父、子页面之间页面元素的获取，方法的调用

    一.jQuery 父.子页面之间页面元素的获取,方法的调用: 1. 父页面获取子页面元素: 格式:$("#iframe的ID").contents().find("#if ...

  4. 结对作业-基于GUI的四则运算

    一.需求分析 1.题目要求: 我们在个人作业1中,用各种语言实现了一个命令行的四则运算小程序.进一步,本次要求把这个程序做成GUI(可以是Windows PC 上的,也可以是Mac.Linux,web ...

  5. [2017BUAA软工助教]评论汇总

    一 邹欣 周筠 飞龙 二 学校 课程 教师 助教1 助教2 助教3 福州 软件工程1715K 柯逍 谢涛 软件工程1715Z 张栋 刘乾 汪培侨 软件工程1715W 汪璟玢 曾逸群 卞倩虹 李娟 集美 ...

  6. 201521123079《java程序设计》第5周学习总结

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

  7. 201521123036 《Java程序设计》第12周学习总结

    本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 书面作业 将Student对象(属性:int id, String name,int age,double grad ...

  8. man page里面函数后面的括号中的数字代表的含义。

    Linux下最通用的领域及其名称及说明如下:领域 名称 说明 1 用户命令, 可由任何人启动的. 2 系统调用, 即由内核提供的函数. 3 例程, 即库函数. 4 设备, 即/dev目录下的特殊文件. ...

  9. Sublime自定义语法

    以thinkphp框架的assign函数为例 在sublime\Data\Packages\PHP下 新建文件:assign.sublime-snippet 内容为 <snippet> & ...

  10. Java Sftp上传下载文件

    需要使用jar包  jsch-0.1.50.jar sftp上传下载实现类 package com.bstek.transit.sftp; import java.io.File; import ja ...