谁能帮我写一个<div>跟着浏览器范围而移动效果【100分求js代码】

调用 document.documentElement.offsetTop 就可以,这个是你浏览器当前内容距离顶部的坐标onscroll 和 onresize 你自己定义一下就可以

解决方案 »

  1.   

    对了,div 记得 position:absolute
      

  2.   

    用position:fixed  试试呢
      

  3.   

    抄来的代码，参考下：
    <!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>固定浮动侧边栏</title>
    <style type="text/css">
    body {
    margin: 10px auto;
    font-family: sans-serif;
    width: 500px;
    }

    div {
    border-radius: 5px;
    box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
    border: 1px solid #ccc;
    padding: 5px;
    }

    #sidebarWrap {
    height: 400px;
    width: 210px;
    float: right;
    position: relative;
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 0;
    }

    #main {
    width: 270px;
    height: 4000px;
    }

    #footer {
    clear: both;
    margin: 10px 0;
    }

    #sidebar {
    width: 200px;
    height: 300px;
    position: absolute;
    }

    #header {
    height: 200px;
    margin-bottom: 10px;
    }

    #sidebar.fixed {
    position: fixed;
    top: 0;
    }

    #footer { height: 600px; }
    </style>
    </head><body>
        <div id="header">header</div>
        
        <div id="sidebarWrap">
            <div id="sidebar">Sidebar</div>
        </div>
        
        <div id="main">
            Main
        </div>
        
        <div id="footer">
            footer
        </div>
    </body>
    </html>
    <script src="../Js/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
        var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));    var maxY = footTop - $('#sidebar').outerHeight();    $(window).scroll(function(evt) {
            var y = $(this).scrollTop();
            if (y > top) {
                if (y < maxY) {
                    $('#sidebar').addClass('fixed').removeAttr('style');
                } else {
                    $('#sidebar').removeClass('fixed').css({
                        position: 'absolute',
                        top: (maxY - top) + 'px'
                    });
                }
            } else {
                $('#sidebar').removeClass('fixed');
            }
        });
    });
    </script>
      

  4.   

    完成剛幫你客製化寫了個： http://jsfiddle.net/w7txx/6/原碼請照實際情況去修改