Прокручиваемый контент с фиксированным заголовком

Question

Я хотел бы иметь контейнер с фиксированным заголовком и прокручиваемым контентом. Вот HTML и CSS я создал для этого

HTML:

<div class="container"> 
    <div class="header">Header</div> 
    <div class="content"> 
    <ul> 
     <li>Content</li> 
     <li>Content</li> 
     ... 
    </ul> 
    </div> 
<div> 

CSS:

.container { 
    margin-top: 200px; 
} 

.header { 
    position: fixed; 
    width: 100%; 
    height: 20px; 
    background-color: blue; 
    color: white; 
} 

.content { 
    padding-top: 20px; 
    height: 250px; 
    background-color: grey; 
    overflow: auto; 
} 

Ссылка на codepen: http://codepen.io/robkom/pen/XKMQGM

Как вы можете видеть, заголовок фиксируется и перекрывает полосу прокрутки (когда видимо). Я хочу, чтобы полоса прокрутки выталкивала заголовок влево (как и в случае с содержимым) и все еще оставалась в верхней части контейнера при прокрутке.

Фиксированные элементы удаляются из нормального потока документов и расположены относительно окна просмотра, поэтому я не уверен, что решение с использованием position: fixed является жизнеспособным, но есть ли способ достичь этого результата?

Answer 1

Вот трюк, используя обертку в заголовке.

Я принудительно прокрутил заголовок, создав размер обертки в соответствии с содержанием, а затем просто увеличил заголовок с помощью 50 пикселей, чтобы убедиться, что все размеры прокрутки различных браузеров покрыты и используют ту же сумму на обертке, чтобы нажать он возвращается в поле зрения.

Выполняя это, вам не нужно беспокоиться о настройке ширины полосы прокрутки (или использовать скрипт).

Я также изменил заголовок на абсолютное положение, так что он позиционируется с контейнером, но вы можете, конечно, вернуться к исправлению, если вам это нужно.

Обновлено

Firefox не показывает полосу прокрутки для малых высот, так что добавление margin/padding-top, как показано ниже, делает его работу

html, body { 
 
    margin: 0; 
 
} 
 
.container { 
 
    position: relative; 
 
    overflow-x: hidden; 
 
    margin-top: 0px; 
 
} 
 
.header { 
 
    position: absolute; 
 
    overflow-y: scroll; 
 
    width: calc(100% + 50px); 
 
    height: 20px; 
 
    margin-top: -20px; /* Firefox doesn't show scrollbar for small */ 
 
    padding-top: 20px; /* heights, so these two lines make it work */ 
 
} 
 
.header .wrapper { 
 
    width: calc(100% - 50px); 
 
    height: 100%; 
 
    background-color: red; 
 
    color: white; 
 
} 
 

 
.content { 
 
    padding-top: 20px; 
 
    height: 200px; 
 
    background-color: grey; 
 
    overflow: auto; 
 
}

<div class="container"> 
 
    <div class="header"> 
 
    <div class="wrapper"> 
 
     Header  
 
    </div> 
 
    </div> 
 
    <div class="content"> 
 
    <ul> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
    </ul> 
 
    </div> 
 
<div>

Answer 2

Это своего рода Hacky решение, но только один я могу думать:

.container { 
    margin-top: 200px; 
    transform: translate3d(0,0,0); /*1*/ 
} 

.header { 
    position: fixed; 
    left: 0; right: 17px; /*2*/ 
    height: 20px; 
    background-color: blue; 
    color: white; 
} 

1. Использование преобразования хак для создания new stacking context означает заголовок будет прикреплен к .container вместо документа.

2. Используйте left и right, чтобы настроить ширину заголовка минус ширина полосы прокрутки (или вы можете сделать это: width: calc(100% - 17px)).

   Я использую магическое число здесь, так как ширина полосы прокрутки составляет 17 пикселей на most modern browsers. Вы можете рассчитать это значение и установить inline с помощью JS (Bootstrap делает это в своем modal).

EDIT: Как было отмечено в комментариях, перевод хак не требуется, как изменение положения к абсолютному (и установка контейнера position: relative) также работает. Вот JS для retriving ширину полосы прокрутки:

function getScrollbarWidth() { 
    var scrollDiv = document.createElement('div'); 
    scrollDiv.style.overflowY = 'scroll'; 
    document.body.appendChild(scrollDiv); 
    var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; 
    document.body.removeChild(scrollDiv); 
    return scrollbarWidth; 
}; 

function setElementWidth(elem) { 
    var offset = getScrollbarWidth(); 
    elem.style.right = offset + 'px'; 
} 

var header = document.querySelector('.header'); 
setElementWidth(header); 

DEMO