How to use Fixed position within a div?

Question

I have a div who has yours header and its content that has a height fixed and this has scroll.
How to put position: fixed in the header (where is the title), without it moving when the scroll go with the page?

Example:

HTML

<div class="main">
    <div id="conversation">
        <div class="header">
            <h3>Título</h3>
        </div>
        <div class="content">
            <ul>
                <li>Primeira conversa</li>
                <li>Segunda conversa</li>
                <li>Terceira conversa</li>
                <li>Terceira conversa</li>
                <li>Terceira conversa</li>
                <li>Terceira conversa</li>
                <li>Terceira conversa</li>
                <li>Terceira conversa</li>
                <li>Terceira conversa</li>
                <li>Terceira conversa</li>
                <li>Terceira conversa</li>
                <li>Terceira conversa</li>
            </ul>
        </div>
    </div>
</div>

CSS

body, html{
    height: 150%
}    
#conversation{
    width: 400px;
    border: 1px solid #eee;
    height: 400px;
    overflow-x: hidden;
} 
.header{
    background: #4ECDC4;
    color: #fff;
    text-align: center;
    height: 40px;
    position: fixed;
    width: 385px;
}
.content{
    margin-top:35px;
}    
ul{
   margin: 0;
   padding: 0;
}
li{
    list-style: none;
    padding: 20px 10px;
    border-bottom: 1px solid #eee;
}

Jsfiddle

Answer 1

When I give position: fixed then the element behaves as a free and independent element of the position of its relative. If you want to prevent this "free" behavior with jQuery, you can do so but I must point out that this code I leave below does the same as removing the position: fixed, as @Bacco suggested and is lower in performance.

But I’m gonna assume you really need to give position: fixed and then my suggestion is to add a scroll "spy" to run a function that adjusts the position of the element taking into account the initial position and the scroll at the time.

var header = $('#conversation .header');
var mainPosition = $('.main').position();
$(document).on('scroll', function () {
    header.css('top', -$(document).scrollTop() + mainPosition.top + 'px');
});

http://jsfiddle.net/45B7H/

Answer 2

Try using position Absolute in the header. For example:

.header{
    background: #4ECDC4;
    color: #fff;
    text-align: center;
    height: 40px;
    position: absolute;
    width: 385px;
}

Answer 3

The position fixed does not fit very well to your need, the position that would best suit position:absolute, but I preferred to better organize your Css.
To better understand how the positions you can read the article Position property of css.

Fixed Position

The position: Fixed; will fix the position of the element in the coordinate you set. As the page is scrolled, the element remains fixed at the position you set and the page content normally scrolls.

It is usually used to fix elements such as headers or sidebars.

Namely the position fixed always keeps fixed to the window and not to the element in which it is inserted, so I made modifications to its css to work exactly as you need.

Css

body, html{
    height: 150%
}

#conversation{
    width: 400px;
    border: 1px solid #eee;
    overflow: hidden;
}

.header {
    background: #4ECDC4;
    color: #fff;
    text-align: center;
    height: 40px;
}

.header h3 {
    margin: 0;
    padding: 0;
    line-height: 40px;
}

.content{
    overflow-x: hidden;
    height: 400px;
}

ul{
   margin: 0;
   padding: 0;
}

li{
    list-style: none;
    padding: 20px 10px;
    border-bottom: 1px solid #eee;
}

You can see the example working on

jsfidle