Does anyone now how to make a DIV inside another DIV that is scroll-able fixed, so that no matter how much I scroll by, the DIV always stays in the same place?

Any help would be greatly appreciated.

Does anyone now how to make a DIV inside another DIV that is scroll-able fixed, so that no matter how much I scroll by, the DIV always stays in the same place?

Any help would be greatly appreciated.

• javascript
• html

• Does your scrollable div ever scroll off screen? – Jeremy Commented Jun 2, 2011 at 14:36
• Yes it does, its like a container held at the top of the screen and loads more information underneath it – William Troup Commented Jun 2, 2011 at 14:40

4 Answers 4

Try this out:

<style type="text/css">
    .scrollable {
        width: 200px;
        height: 200px;
        background: #333;
        overflow: scroll;
    }
    .fixed {
        position: absolute;
        top: 180px;
        width: 200px;
        height: 20px;
        background: #fa2;
    }
</style>
<div class="scrollable">
    im scrollable<br><br>
    im scrollable<br><br>
    im scrollable<br><br>
    im scrollable<br><br>
    im scrollable<br><br>
    im scrollable<br><br>
    <div class="fixed">and I'm fixed</div>
</div>

I would recommend absolutely positioning the div over the scrollable div. It wont be in the scrollable div, because it doesn't need to be.

I solved this issue using position:sticky. To explain, I have just copied html/css from other answers here. Obviously position:sticky has limited support across browsers. Please check before using this solution.

<style type="text/css">
    .scrollable {
        width: 200px;
        height: 200px;
        background: #333;
        overflow: scroll;
    }
    .fixed {
        position: sticky;
        top: 80%;
        left: 80%;
        width: 20px;
        height: 20px;
        background: #fa2;
    }
</style>
<div class="scrollable">
    im scrollable<br><br>
    im scrollable<br><br>
    im scrollable<br><br>
    im scrollable<br><br>
    im scrollable<br><br>
    im scrollable<br><br>
    <div class="fixed">and I'm fixed</div>
</div>

Fixed div in scrollable div

#container {
position:absolute;
top:150px;
left:150px;
width:600px;
height:500px;
overflow:hidden;
border:3px dashed #ffff00;
padding:0px;
}

#this_scroll {
position:absolute;
top:0px;
right:0px;
width:99%;
height:99%;
overflow:scroll;
border:2px solid #000;
margin:1px;
background:#B0BDCE;
}

#fix_close {
position:absolute;
top:2px;
right:21px;
width:90px;
height:30px;
overflow:hidden;
border:2px solid #660099;
z-index:10;
background:#8C8C8C;
}


<div id="container">

    <div id="this_scroll">
    <p>some yxyxyx</p><p>some yxyxyx</p>
    </div>

    <div id="fix_close">
        close
    </div>

</div>