How to use fixed position inside a div?

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

But I will assume that 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 starting position and the scroll at the moment.

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

link

Try to use position absolute in the header. For example:

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

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

  

Position Fixed

     

O position: fixed; will set the position of the element in the coordinate that you set. As the page is rolled, the element remains fixed at the position you set and the page content scrolls normally.

     

Generally used to fix elements such as headers or sidebars.

In other words, the position fixed is always fixed to the window and not to the element it is inserted in, so I made changes to its css to work exactly as you need it.

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 in

jsfidle