Позиция: липкий не работает

Ответ 1

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

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

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

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

Итак, когда я не понимаю, navbar позиционируется со смещением 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>

Ответ 2

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

Ответ 3

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

<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 принесет полную поддержку для этого! Я нашел интересные статьи по этой теме:

• Рабочая демонстрация (chrome, firefox 👍) https://codepen.io/simevidas/pen/JbdJRZ
• Caniuse refernce: http://caniuse.com/#search=sticky
• липкая статья о MDN, включая последнюю таблицу поддержки браузера https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

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

Ответ 4

Ваш код 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;
}

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

Ответ 5

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

Таким образом, единственное решение с чистым CSS - это поместить nav внутри элемента, который частично виден даже после прокрутки пользователем до нижней части страницы (непосредственно внутри тела или внутри какого-либо контейнера, который простирается до нижней части страницы или, по крайней мере, в нижний колонтитул).

Если это решение невозможно, другой способ - использовать JavaScript. Перед переходом на CSS я использовал следующий код (где-то давно было найдено похожее решение jQuery, не помню где, поэтому заслуга принадлежит анонимному автору; из этого легко можно получить Vanilla JS):

$(document).ready(function () {
    var sticky_navigation_offset_top = $('nav').offset().top;
    var sticky_navigation = function () {
        var scroll_top = $(window).scrollTop();
        if (scroll_top > sticky_navigation_offset_top) {
            $('nav').css({
                'position': 'fixed',
                'top': 0,
                'left': 0,
                'right': 0,
                'margin-left': 'auto',
                'margin-right': 'auto'
            });
        } else {
            $('nav').css({
                'position': 'relative'
            });
        }
    };
    sticky_navigation();
    $(window).scroll(function () {
        sticky_navigation();
    });
});