<%
    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. Angularjs之表单实例（三）

    正确引用js css文件后可运行 <!DOCTYPE html> <html ng-app='myApp'> <head> <title>Bootstr ...

  2. OSAL

    1. CC254x的软件基于OSAL架构 2. OSAL并非一个真的操作系统, 而只是让软件设立一个事件的执行方法(setup excution of events) 3. 每一个子系统都在OSAL的 ...

  3. Python 的命令行参数处理 optparse->argparse

    optaprse自2.7版开始弃用:弃用optparse模块,不会进一步开发,将继续开发argparse模块作为替代. 但是用习惯了optparse,还是很好用的撒. optparse使用起来,相比旧 ...

  4. ［转］AngularJS的$resource

    转自:http://blog.csdn.net/violet_day/article/details/17403207 $http $http服务是基于$q服务的,提供了promise封装,它接受一个 ...

  5. How To Create a SSL Certificate on Apache for CentOS 6

    About Self-Signed Certificates 自签证书.一个SSL证书,是加密网站的信息,并创建更安全的链接的一种方式.附加地,证书可以给网站浏览者显示VPS的的身份证明信息.如果一个 ...

  6. 创建sh文件

    创建sh文件 #/bin/bash v_file=$ v_type=$ v_desc=$ touch $v_file echo '#================================== ...

  7. iOS开发- 蓝牙后台接收数据(BLE4.0)

    最近在做一个蓝牙相关的项目, 需要在应用进入后台, 或者手机属于锁屏状态的情况下, 仍然保持蓝牙连接, 并且能正常接收数据. 本来以后会很麻烦, 但是学习了下..发现就2步而已.简单的不能再简单了. ...

  8. bianwu | 数据行 | 填写意见

    protected void gv1_RowDataBound(object sender, GridViewRowEventArgs e) { //首先判断是否是数据行 if (e.Row.RowT ...

  9. python day5--正则表达式

    #----正则表达式 import re elink = '<a href="(.*)">(.*)</a>' info = '<a href=&quo ...

  10. 使用repeater实现gridview的功能

    <asp:Repeater ID="rptfindData" runat="server"> <HeaderTemplate> < ...