<%
    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. Java中this关键字的使用

    本文介绍了在Java中this关键字的作用于使用方法 当局部变量和成员变量重名时,在方法中使用this时,表示的是该方法所在类中的成员变量.(this指的是当前对象自己) 如:public class ...

  2. java中的拷贝（二）深克隆

    浅拷贝(Object类中的clone()方法)是指在拷贝对象时,对于基本数据类型的变量会重新复制一份,而对于引用类型的变量只是对引用进行拷贝. 深拷贝(或叫深克隆) 则是对对象及该对象关联的对象内容, ...

  3. java总结第四次//常用类

    六.常用类 主要内容:Object类.String类.Date类.封装类 (一)Object类 1.Object类是所有Java类的根父类 2.如果在类的声明中未使用extends关键字指明其父类,则 ...

  4. E2PROM的尺寸

    买的E2PROM是128*8bit的, 就是只能存储128个byte, 妈的, 买小了. 实际需要的是10句, 可能加两个特殊句, "新手"跟"故障", 一共1 ...

  5. 兼容IE, Chrome的ajax function

    gAjax.js var gAjax = (function () { /* paramObj:{ url: request url, method: GET or POST, encode: cha ...

  6. jquery ui 常用（二）（对话框 | 旋转器 | 工具提示框（表单） | 特效（百叶窗） ）

    一.添加信息的对话框  http://www.w3cschool.cc/try/tryit.php?filename=jqueryui-example-dialog-modal-form. 模态表单 ...

  7. c#调用c++的dll,错误篇

    "LIPS.vshost.exe"(托管(v4.0.30319)): 已加载"C:\Windows\Microsoft.Net\assembly\GAC_MSIL\Sys ...

  8. Oracle关闭session锁

    select session_id from v$locked_object;//找到锁的sessionId   SELECT * FROM v$session //查看该sessionId以及对应的 ...

  9. Cookie案例

    实现的功能是:在页面上点击,各种书名,跳转到另一个页面,在点解return 回到原来的页面,并且最下面出现刚才点击的书名:进行多次操作,都会出现刚刚点击的书名: 类似于:在浏览器上显示你登录的记录: ...

  10. 一个通用的DAO模型实现增删改查

    首先三个架包: mysql-connector-java-jar commons-dbcp-1.4jar commons-pool-1.5.5jar 导进去: (从上往下一次调用,实现功能) ---- ...