[oleg901]

Доброго времени суток, есть такой разметка

<div class="sidebar">
  
    <div id="scrollable">
    <div id="fixed">
        position:fixed        
    </div>
        Scrolling content<br><br><br>
        Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку. 
        <br><br>
        В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?<br><br><br>
        Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку. 
        <br><br>
        В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?<br><br><br>
        Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку. 
        <br><br>
        В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?<br><br><br>
        Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку. 
        <br><br>
        В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?
        
        
    </div>
</div>

div.sidebar {
    background: #fff;
    width: 100%;
}
div#scrollable {
    overflow-y: auto;
    height: 200px;
}
div#fixed {
    background: #76a7dc;
    color: #fff;
    position:fixed;
    top:0;
    height:50px;
    width:100%;
}

Проблема заключается в том, что при наведении на область с фиксированным контентом скролл перестает реагировать. Есть какие-нибудь идеи как можно решить данную задачу? P.s Частично вопрос решается заменой fixed на sticky, но частично и не поддерживается старыми браузерами хотелось бы найти более универсальное решение. За ранее спасибо за ответ

ссылка на пример:
http://jsfiddle.net/8rqetnyo/