Javascript-форум - Фикцация элемента в контейнере с прокруткой (локальный position:fixed)

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Фикцация элемента в контейнере с прокруткой (локальный position:fixed) (https://javascript.ru/forum/dom-window/36669-fikcaciya-ehlementa-v-kontejjnere-s-prokrutkojj-lokalnyjj-position-fixed.html)

Фикцация элемента в контейнере с прокруткой (локальный position:fixed)

Имеется контейнер с прокручиваемой областью, в нем элеменет:

<!DOCTYPE html>
<style>
    #container{
        position: relative;
        overflow: scroll;
        width: 200px;
        height: 200px;
    }
    #staff{
        width: 1000px;
        height: 1000px;
    }
    #element{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background: rgba(255, 0, 0, 0.4);
    }
</style>
<div id="container">
    <div id="element"></div>
    <div id="staff"></div>
</div>

Реально ли зафиксировать #element так, чтобы он не прокручивался, то есть вел себя примерно как position:fixed, но относительно не viewport'а, а контейнера? Вариант с прослушиванием onscroll не подходит, так как элемент будет дергаться.
Скроллбары должны быть именно у #container

Вот здесь глянь-скролл подвигай
http://codepen.io/paulirish/pen/CgAof

Так position:fixed позиционируется относительно вьюпорта. А мне нужно относительно контейнера. Сама страница тоже может иметь скроллбары и сам контейнер может вообще уехать за пределы вьюпорта. Элементы с position:fixed не уедут вместе с контейнером, а так и останутся впределах вьюпорта.

Вряд ли получиться это сделать без наложения #element поверх #container

<!DOCTYPE html>
<style>
    #container{
        position: relative;
        overflow: scroll;
        width: 200px;
        height: 200px;
    }
    #hack {
        position: absolute;
    }
    #staff{
        width: 1000px;
        height: 1000px;
    }
    #element{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background: rgba(255, 0, 0, 0.4);
    }
</style>
<div id="hack">
    <div id="element"></div>
</div>
<div id="container">    
    <div id="staff"></div>
</div>
<script>
    var container = document.getElementById('container'),
        hack = document.getElementById('hack');
    hack.style.width  = container.clientWidth + 'px';
    hack.style.height = container.clientHeight + 'px';
    hack.style.left   = container.offsetLeft + 'px';
    hack.style.top    = container.offsetTop + 'px';
</script>

Сорри за оффтоп:
1. почему у меня в подписи появляется "code_5149b5065efd6" вместо "return caprion;", хотя при предпросмотре все нормально?
2. как при ответе сделать кнопку "Посмотреть" вверху кода, как у danik.js в этой теме?

Не не, это не то. Я ведь говорил - скроллбары должны быть у контейнера. А теперь фактически они не у него, а у дочернего элемента (теперь контейнер - body)

2. Добавить атрибут run. Можно нажать кнопку Цитата у кого-нибудь и посмотреть как все размечено.