<%
    String path = request.getContextPath();
%>
<!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>
<meta charset="UTF-8">
    <title>无标题页</title>
    <style type="text/css">
    .scrolldiv{
    width:100px;
    height:200px;
    position:absolute;
    top:300px;
    left:30px;
    background-color:red;
    }
    </style>
    <script type="text/javascript" src="<%=path%>/bbs/js/jquery-1.10.2.js"></script>
</head>
<body style="width:2000px;height:8000px">
<div class="scrolldiv" id="scrolldiv"></div>
</body>
  <script type="text/javascript">
  var timer;
    $(function(){
        $(window).scroll(function(){
            clearInterval(timer);
            var topScroll=getScroll();
            var topDiv="1px";
            var top=topScroll+parseInt(topDiv);
            timer=setInterval(function(){
                    //$(".test").css("top", top+"px");
                     $(".scrolldiv").animate({"top":top},500);
            },500)
        })
    })
    function getScroll(){
             var bodyTop = 0;  
             if (typeof window.pageYOffset != 'undefined') {  
                     bodyTop = window.pageYOffset;  
             } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {  
                     bodyTop = document.documentElement.scrollTop;  
             }  
             else if (typeof document.body != 'undefined') {  
                     bodyTop = document.body.scrollTop;  
             }  
             return bodyTop
    }
    </script>
</html>

div相对浏览器移动的更多相关文章

  1. 【css】设置div位于浏览器的最底层，离用户最远

    有时候切换发现某块div一直悬浮在最上层,怎么设置div位于浏览器的最底层.离用户最远? <style> .in{ z-index: -1; } </style> 然后引用in ...

  2. 固定一个div在浏览器底部

    转自原文 如何固定一个div在浏览器底部   方法1:使用CSS绝对定位 div{ position:absolute; bottom:0px; left:0px; } 方法2:使用CSS固定定位 d ...

  3. Js控制Div在浏览器中的高度

    //需求是,我需要通过浏览器内容可视化的高度来控制div的高度boxheight(); //执行函数function boxheight(){ //函数:获取尺寸 //获取浏览器窗口高度 var wi ...

  4. div在浏览器窗口中居中

    让div相对于浏览器窗口居中. 方案一:纯粹使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset=" ...

  5. 获取DIV与浏览器顶部相聚一定位置之后移动DIV

    获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() {  ...

  6. 让div自适应浏览器窗口居中显示

    今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1& ...

  7. 纯css解决div隐藏浏览器原生滚动条，但保留鼠标滚动效果的问题

    当我们的内容超出了我们的div,往往会出现滚动条,影响美观.尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果.  我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效 ...

  8. 兼容浏览器 div固定浏览器窗口底部 浮动div

    css内容: <style type="text/css"> #ken_BB { padding-right:30px; text-align: center; col ...

  9. 实现一个div在浏览器水平居中

    第一种方法: div { margin: 0 auto; width: 960px; } 第二种方法(兼容IE): body { text-align: center; } div { margin: ...

随机推荐

  1. 前端不为人知的一面–前端冷知识集锦 原文地址（http://web.jobbole.com/83473/）；

    前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...

  2. Mysql slow query log

    一.概念部分:  顾名思义,慢查询日志中记录的是执行时间较长的query,也就是我们常说的slow query,通过设--log-slow-queries[=file_name]来打开该功能并设置记录 ...

  3. 深入浅出Windows Phone 8应用开发

    刚刚拿到<深入浅出Windows Phone 8应用开发>这本书,开始捣鼓我的Nokia Lumia 925T,已经有开发一个属于自己的App的想法了,计划先不公布了,等我这个App上线了 ...

  4. SQL中char、varchar、nvarchar的区别

    char    char是定长的,也就是当你输入的字符小于你指定的数目时,char(8),你输入的字符小于8时,它会再后面补空值.当你输入的字符大于指定的数时,它会截取超出的字符.   nvarcha ...

  5. HDU 3076：ssworld VS DDD（概率DP）

    http://acm.split.hdu.edu.cn/showproblem.php?pid=3076 ssworld VS DDD Problem Description   One day, s ...

  6. MVP+RXJAVA+RecyclerView实现sd卡根目录下的所有文件中的照片加载并显示

    初学Rxjava,目前只能遍历加载指定目录下的所有文件夹中的照片,文件夹中如果还嵌套有文件夹目前还没找到实现方法. 先看mvp目录结构: 很抱歉,没有model. 接下来是view层的接口代码和pre ...

  7. ［转］iOS应用程序生命周期(前后台切换,应用的各种状态)详解

    转载地址:http://blog.csdn.net/totogo2010/article/details/8048652 iOS的应用程序的生命周期,还有程序是运行在前台还是后台,应用程序各个状态的变 ...

  8. cookie存储记录

    ////// 历史记录 $(function () { // 标题 var art_title = $("#Lbl_Hotel_Name").text(); // 得到当前路径 v ...

  9. Java内部类、静态嵌套类、局部内部类、匿名内部类

    Nested classes are further divided into two types: static nested classes: If the nested class is sta ...

  10. gcc/g++动态链接库和静态库的链接顺序

    转自:http://withc8212.blog.163.com/blog/static/11656983820109263562854/ so文件:动态库a文件: 静态库exe文件:可执行程序(li ...