Geek Answers Handbook

Make a “div” stick at the top of another absolutely overflowing scrollable div

Here is a div .pagethat is absolutely positioned on this page. Inside there is a div .containerand inside the container there is .contents.

.pagehas a certain landmark, so the contents will scroll inside .page. In this situation, I want the div .stuckto stick to the top .page. (I'm sure I made grammar mistakes above!)

Anyway, fiddel:

http://jsfiddle.net/YBAvb/

update: I want to .stuckbe fixed at the top .pageregardless of the scroll in .page.

this is the layout:

<div class="page">
    <div class="container">
        <div class="content"></div>
        <div class="stuck"></div>
    </div>
</div>

and my (not working) css:

.page{
    position: absolute;
    top:50px;
    left:200px;
    width:200px;
    height:300px;
    overflow:auto;
}
.container{
    position:relative;
}
.stuck{
    position: absolute;
    top:0;
    right:0;
    left:0;
    height:50px;
    background:blue;
}
.content{
    height:700px;
    background:gray;
}

, .stuck div .page div. ?

: : , .stuck be positions:fixed .page, , .page JS .

+4
2

.page .stuck .

http://jsfiddle.net/YBAvb/1/

    .page_holder{
        position: absolute;
        top:50px;
        left:200px;
        width:200px;
        height:300px;
    }
    .page {
        position: absolute;
        top:0;
        left:0;
        width:200px;
        height:300px;
        overflow:auto;
        z-index: 1;
    }
    .container {
        position:relative;
    }
    .stuck {
        position: absolute;
        top:0;
        right:0;
        left:0;
        height:50px;
        background:blue;
        margin-right: 18px;
        z-index: 2;
    }
    <div class="page_holder">
        <div class="stuck"></div>
        <div class="page">
            <div class="container">
                <div class="content"></div>
            </div>
        </div>
    </div>
Hide result
+4

.page JS .

... JS!:)

HTML
Javascript jQuery: JSBIN DEMO

$('.stuck').each(function(){

  var $that = $(this),
      $page = $that.closest('.page');

  $page.scroll(function(){      
    $that.css({top: this.scrollTop});
  });

});
+1

More articles:


All Articles