仅当它不在窗口范围内时才滚动div

时间:2011-07-04 12:28:13

标签: javascript jquery css

我有这段代码:

侧栏div是我的问题

我正在向下滚动页面,我希望div也能滚动,但是当它的底部是visibale时停止滚动...然后在div的顶部向上滚动同样的东西

我甚至不知道该怎么做才能做任何事情

<html>
    <head>
        <style>
            body {
                margin: 0px;
                padding: 0px;
                width: 100%;
                height: 100%;
                position: relative;
            }

            #header {
                background:red;
                width: 100%;
                height: 50px;
                position:fixed;
                top: 0px;
            }

            #sidebar {
                float:left;
                background: blue;
                width:120px;
                min-height:100px;
                position: absolute;
                top: 50;
                left:0;
            }

            #footer {
                background:red;
                width: 100%;
                height: 50px;
                position:fixed;
                bottom: 0px;
            }

            #content {
                margin: 60px 0px 60px 140px;
            }
        </style>
    </head>
    <body>
        <div id="sidebar">
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
            sidebar<br />
        </div>
        <div id="content">
            top<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            text<br />
            bottom<br />
        </div>
        <div id="header">
        </div>
        <div id="footer">
        </div>
    </body>
</html>

1 个答案:

答案 0 :(得分:1)

检查there这是否是你想要的。