Как сделать заголовок с фиксированной позицией?

Question

Возможно ли сделать положение заголовка фиксированным, когда верхние значения равны 0%? ~ Например, верхнее значение заголовка начинается с 20%, мы прокручиваем вниз, и оно достигает значения 0%, а затем остается фиксированным.

Я могу использовать только HTML/CSS.

Answer 1

Да, это возможно с новым предлагаемым имуществом position: sticky;, которое в настоящее время поддерживается только в Firefox и имеет префикс в Safari. Дополнительную информацию о поддержке браузера см. В разделе Caniuse.

Из W3C:

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

В частности, когда ящик был выложен в соответствии с нормальным потоком или плавающим, его липкое смещение вычисляется, как описано ниже. Таким образом, смещение коробки (B1) не влияет на поле (B2), которое следует: B2 дается позиция, как если бы B1 не были смещены, а B2 не был повторно позиционирован после применения смещения B1. Это означает, что липкое позиционирование может привести к перекрытию ящиков. Однако, если липкое позиционирование приводит к переполнению поля «переполнение: авто» или «переполнение: прокрутка», пользовательский агент должен разрешить пользователю получать доступ к этому контенту (в его позиции смещения), который благодаря созданию механизма прокрутки , может повлиять на макет.

JSFiddle Example

html, body { 
 
    margin: 0; 
 
} 
 

 
body * { 
 
    margin: 20px; 
 
    padding: 20px; 
 
} 
 

 
.header { 
 
    margin: 0; 
 
    padding: 20px; 
 
    background: #000; 
 
} 
 

 
.header span { 
 
    display: block; 
 
    color: #fff; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    padding: 0; 
 
} 
 

 
.placeholder { 
 
    border: 1px solid black; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    height: 300px; 
 
} 
 

 
.slider { 
 
    background: #006264; 
 
    color: white; 
 
    font-weight: bold; 
 
    margin: 0 auto; 
 
    position: sticky; 
 
    top: 0px; 
 
}

<div class="header"><span>This is a header</span></div> 
 
<div class="placeholder">This div holds place</div> 
 
<div class="slider">This should slide up and then stick.</div> 
 
<div class="placeholder">This div holds place</div> 
 
<div class="placeholder">This div holds place</div> 
 
<div class="placeholder">This div holds place</div> 
 
<div class="placeholder">This div holds place</div>