Для блока который нужно фиксировать задаёте position: fixed (+ top, right, bottom, left при необходимости). Для контейнера в котором находится фиксированный элемент (или body) задаёте padding-top равный высоте фиксированного элемента.
Данные свойства можно назначать элементам динамически с помощью JavaScript или jQuery, если у вас адаптивный дизайн.
window.addEventListener('resize', function(event) {
...
}, true);
или
window.onresize = function(event) {
...
};
Внутри данных функций при загрузке страницы (см. addEventListener('DOMContentLoaded')) обычно я высчитываю высоту фиксируемого блока и потом назначаю этот размер для padding-top нужного мне родителя. Это позволяет корректно отображать контент при изменении ширины окна.
На основе этой идеи также делается "липкий блок", когда нужно, чтобы элемент становился фиксированным при перелистывании страницы в определённый момент. Здесь стоит использовать cвойство scrollTop.
Средний
