положение: липкий не работает

У меня есть такой HTML код: 

<div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
<div class="navbar"></div></div>

.заголовок имеет высоту 150px. .навигации высотой в 20px. Когда пользователь прокручивает, я хочу .навбар, чтобы придерживаться в верхней части. Поэтому я пошел в CSS и установил позицию: sticky и top: 0. Но это не сработало. Я изначально думал, что firefox не поддерживает позицию:sticky, но это не так, потому что я смог увидеть рабочую демонстрацию этого. Я погуглил об этом, но не нашел ничего полезного. Кто-нибудь знает, почему это не работает?

4 6
css navbar

4 ответа:

Это прекрасно работает, если вы перемещаете навигационную панель за пределы заголовка. Увидеть ниже. По причине, согласно MDN:

Элемент позиционируется в соответствии с нормальным потоком документа, а затемсмещается относительно его корня потока исодержащего блока на основе значений top, right, bottom и left.

Для содержащего блок :

Содержащий блок является предком, к которому элемент относится относительно позиционируется

Итак, если я правильно понял, навигационная панель располагается со смещением 0 в заголовке, Как только она прокручивается за пределами окна просмотра (что, очевидно, означает, что вы больше не можете ее видеть).

.navbar {
  background: hotpink;
  width: 100%;
  height: 50px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.header {
  height: 150px;
  background: grey;
}

body {
  height: 800px;
  position: relative;
}
<div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
</div>

<div class="navbar"></div>
8

Для любого другого, кто столкнется с этим, позиция sticky не работала для меня из-за элемента body, имеющего overflow-x: hidden; набор.

11

Каким-то образом ваш код работает только тогда, когда элемент .navbar не находится внутри другого контейнера, такого как заголовок. Я убрал его, и теперь он работает нормально. для этого я создал фрагмент codepen, проверьте его 

<header>
    <div class="logo">Logo</div>
    <div class="description"><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, veritatis.</div></div>
</header>
<div class="navbar">
    <ul>
        <li><a href="#">navitem1</a></li>
        <li><a href="#">navitem2</a></li>
        <li><a href="#">navitem3</a></li>
        <li><a href="#">navitem4</a></li>
    </ul>
</div>

Прямо сейчас position:sticky поддерживается довольно хорошо, как вы можете видеть на canIuse. Конечно, IE в настоящее время не имеет поддержки, но новая версия Edge принесет полную поддержку для этого! Я нашел несколько интересных статей на эту тему:

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

Ваш HTML-код, как он есть 

<div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
<div class="navbar"></div></div>

И написать класс CSS для панели навигации 

.header {
height: 150px;
background-color: #d1d1d1;
}

.navbar {
  background: #999;
  border-bottom: 1px solid #333;
  border-top: 1px solid #333;
  color: #FFF;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

Надеюсь, это поможет

0