<%
    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. 锋利的JQuery（四）

    表单: 一个表单有三个基本组成部分:表单标签.表单域.表单按钮 Cookie: 在jQuery中有一款Cookie插件,<script src="js/jquery.cookie.js ...

  2. VisualSVNServer启动失败错误处理

    VisualSVNServerServer service failed to start:     服务已返回特定的服务器错误代码:(0x8007042a)     Please check Vis ...

  3. 图像处理控件ImageGear for .NET教程如何为应用程序 添加DICOM功能（2）

    在前面的一些关于图像处理控件ImageGear for .NET文章<图像处理控件ImageGear for .NET教程: 添加DICOM功能(1)>中讲解了如何对应用程序添加DICOM ...

  4. Hibernate，JPA注解@SecondaryTables

    使用类一级的 @SecondaryTable或@SecondaryTables注解可以实现单个实体到多个表的映射. 使用 @Column或者 @JoinColumn注解中的table参数可指定某个列所 ...

  5. Ubuntu 14.04下NFS安装配置

    1.安装nfs-server # apt-get install nfs-kernel-server 2.建立nfs专用文件夹 # mkdir /data/disk1 3.配置nfs # vi /et ...

  6. OpenStack集成Docker

    声明:绝对原创,欢迎转载,但请标明出处,谢谢! 最近在做openstack与Docker的集成工作,走了不少弯路,遇到不少问题,不过最终搭建成功了.现在将过程分享出来,以供参考. 一.环境介绍 1.软 ...

  7. Oracle 11gR2新建空表不分配Segment

    一.引言: 在看<收获,不止Oracle>的神奇,走进逻辑体系世界一章时,需要新建一张表查看Extents的情况,由于该书的环境是ORACLE10G的,因此新建空表以后立刻就分配Segme ...

  8. 微信开放平台API开发资料

    微信大概两年前开启了微信公众平台的API供开发者使用,从账号登陆.消息发送.用户账号管理.公众号菜单.客服接口.微信商店接口.用户卡券接口 以及微信支付接口.可以说是全方面覆盖了电商所需要的要素,与阿 ...

  9. 栈——PowerShell版

    上一篇讲过队列(queue),队列就像是居民楼里的垃圾管道,从楼道的垃圾管道的入口处将垃圾扔进去,清洁工会从一楼垃圾管道的出口处将垃圾拿走.每一层的垃圾通道入口与一楼的垃圾管道出口之间都形成了一个队列 ...

  10. 制作动画平滑过渡效果：《CSS3 Transition》

    W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...