Исправить заголовок в верхней части контейнера с переполнением: auto;

Question

У меня есть некоторое содержимое внутри overflow: auto; контейнера:

https://jsfiddle.net/h4y37qwu/

<div class="container"> 
<div class="header"> 

</div> 
    <div class="content"> 

    </div> 
</div> 

CSS

.container { 
    width: 500px; 
    height: 200px; 
    overflow: auto; 
    position: relative; 
} 
.header { 
    width: 1000px; 
    height: 50px; 
    background-color: blue; 
    position: absolute; 
    top: 0; left: 0; 
} 
.content { 
    width: 1000px; 
    height: 1000px; 
    background: green; 
} 

Я пытаюсь исправить .header блок в верхней части .container так было зафиксировано когда вы прокручиваете. Однако он не работает с position: absolute; Любые идеи?

Answer 1

Если вам нужно использовать position: absolute; вы можете использовать jquery и функцию прокрутки для смещения e вверх при каждом прокрутке.

см https://jsfiddle.net/rvkh3v4n/

$('.container').scroll(function() { 
    $('.header').offset({ top: 8 }); 
}); 

Answer 2

Я думаю, что вам нужен

position:fixed. 

Вот что вам нужно

.header { 
width: 1000px; 
height: 50px; 
background-color: blue; 
position: fixed; 
top: 0; left: 0; 
} 

Answer 3

Try:

position: fixed; 

После этого вы должны настроить поля для заголовка в соответствии с контейнер:

.header { 
    width: 682px; 
    height: 50px; 
    background-color: blue; 
    position: fixed; 
    top: 10; left: 10; 
} 

Fiddle

Answer 4

Здесь вы идете, я сделал несколько изменений:

не более position: absolute;

overflow: auto на вашем .content элемент

https://jsfiddle.net/h4y37qwu/2/