Блог

Главная - Вопросы по программированию - Только CSS — Липкая навигация сверху после прокрутки за пределами заголовка

Только CSS — Липкая навигация сверху после прокрутки за пределами заголовка

#css #sticky

#css #липкий

Вопрос:

Возможно ли иметь следующее без использования javascript? Итак, чистый css, использующий sticky позицию.

 * {
  margin: 0;
  padding: 0;
  font-family: arial;
}

header {
  width: 100%;
  height: 200px;
  background: grey;
}

.sticky-nav {
  position: sticky;
  top: 0;
  width: 100%;
  background: black;
  color: pink;
}

.nav-items {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  list-style-type: none;
}

.nav-items li {
  margin: 10px 20px;
}

.header-content {
  font-size: 3rem;
  padding: 20px 10px;
}

.site-content {
  min-height: 2000px;
  background: pink;
  padding: 30px;
}  
 <header>
  <div class="sticky-nav">
    <ul class="nav-items">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </div>
  <div class="header-content">
    Part of the Header
  </div>
</header>

<div class="site-content">
  <p>
    When the user scrolls to this point (site-content) - the top nav should now be sticky
  </p>
</div>

С помощью jsfiddle:
https://jsfiddle.net/eyfbh3v2 /

Возможно ли, чтобы верхняя часть sticky-nav была прикреплена к верхней части страницы только после того, как заголовок прокручивается за пределы viewpoint / .site-содержимое попадает в верхнюю часть страницы при прокрутке?

Ответ №1:

к сожалению, свойство sticky доступно только в родительском теге, где оно определено

Это значение всегда создает новый контекст стекирования. Обратите внимание, что липкий элемент «прилипает» к своему ближайшему предку, у которого есть «механизм прокрутки» (создается, когда скрыто переполнение, прокрутка, авто или наложение), даже если этот предок не является ближайшим фактически прокручиваемым предком. Это эффективно подавляет любое «липкое» поведение (см. Проблему GitHub на W3C CSSWG).

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Если вы не хотите менять структуру своей страницы, одним из способов может быть использование фиксированного положения тега sticky-nav 

 .sticky-nav {
  position: fixed;
  top: 0;
  width: 100%;
  background: black;
  color: pink;
}

еще один способ — разместить тег sticky на том же родительском уровне, что и site-content