"Позиция: липкая"; не работает CSS и HTML

Ответ 1

Липкое позиционирование - это гибрид относительного и фиксированного позиционирования. Элемент обрабатывается как относительный, пока он не пересечет указанный порог, после чего он рассматривается как фиксированный.
...
Вы должны указать порог с по крайней мере одним из top, right, bottom или left для того, чтобы липкое позиционирование могло вести себя так, как ожидалось. В противном случае он будет неотличим от относительного позиционирования. [ источник: MDN ]

Таким образом, в вашем примере вам нужно определить позицию, в которой он должен вставляться в конце, используя top свойство.

html, body {
  height: 200%;
}

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

Ответ 2

Проверьте, установлен ли переполнение для элемента-предка (например, overflow:hidden); попробуйте переключить это. Возможно, вам придется подняться на дерево DOM выше, чем вы ожидаете =).

Это может повлиять на вашу position:sticky на элемент-потомок.

Ответ 3

У меня такая же проблема, и я нашел ответ здесь.

Если ваш элемент не прилипает, как ожидается, первое, что нужно проверить, это правила, применяемые к контейнеру.

В частности, найдите любое свойство переполнения, заданное родительским. Вы не можете использовать: overflow: hidden, overflow: scroll или overflow: auto на родительском элементе position: sticky элемент.

Ответ 4

Еще несколько вещей, с которыми я столкнулся:

Когда ваш липкий элемент является компонентом (угловой и т.д.)

• Если сам "липкий" элемент является компонентом с пользовательским селектором элементов, таким как угловой компонент с именем <app-menu-bar> вам необходимо добавить следующее к компоненту css:

  :host { display: block; }   
  

  или же

  app-menu-bar  { display: block; }   // (in the containing component css)
  

  В частности, для Safari на iOS, по-видимому, требуется display:block даже корневой элемент app-root углового приложения, иначе он не будет прикреплен.

• Если вы создаете компонент и определяете CSS внутри компонента (теневой DOM/инкапсулированные стили), убедитесь, что position: sticky применяется к "внешнему" селектору (например, app-menu-bar в devtools должен показывать sticky положение), а не div верхнего уровня внутри компонента. С помощью Angular этого можно достичь с помощью селектора :host в css для вашего компонента.

  :host
  {
      position: sticky;
      display: block;   // this is the same as shown above
      top: 0;
      background: red;    
  }
  

Другой

• Если элемент, следующий за вашим липким элементом, имеет сплошной фон, вы должны добавить следующее, чтобы он не скользил внизу:

  .sticky-element { z-index: 100; }
  .parent-of-sticky-element { position: relative; }
  

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

• При использовании overflow: hidden возникают сложности overflow: hidden в вашем элементе-обертке - в общем, это убьет липкий элемент внутри. Лучше объяснил в этом вопросе

• Мобильные браузеры могут отключать элементы с фиксированным или фиксированным расположением, когда отображается экранная клавиатура. Я не уверен в точных правилах (кто-нибудь когда-либо знает), но когда клавиатура видна, вы смотрите на своего рода "окно" в окно, и вы не сможете легко заставить вещи придерживаться фактическая видимая верхняя часть экрана.

• Убедитесь, что у вас есть:

  position: sticky;

  и не

  display: sticky;

Проблемы с юзабилити

• Будьте осторожны, если ваш дизайн требует приклеивать вещи к нижней части экрана на мобильных устройствах. На iPhone X, например, они отображают узкую линию, чтобы указать область прокрутки (чтобы вернуться на домашнюю страницу) - и элементы внутри этой области не кликабельны. Поэтому, если вы что-то вставите, обязательно протестируйте на iPhone X, чтобы пользователи могли его активировать. Большая кнопка "Купить сейчас" бесполезна, если люди не могут нажать на нее!
• Если вы размещаете рекламу на Facebook, веб-страница отображается в элементе управления "просмотр веб-страниц" в мобильных приложениях Facebook. Особенно при отображении видео (где ваш контент начинается только в нижней половине экрана) - они часто полностью портят липкие элементы, помещая вашу страницу в прокручиваемое окно просмотра, которое фактически позволяет вашим липким элементам исчезать с верхней части страницы. Обязательно протестируйте в контексте реальной рекламы, а не только в браузере телефона или даже в браузере Facebook, которые могут вести себя по-разному.

Ответ 5

Это продолжение ответов от MarsAndBack и Miftah Mizwar.

Их ответы верны. Тем не менее, трудно определить проблему предка (ей).

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

$('.your-sticky-element').parents().filter(function() {
    console.log($(this));
    console.log($(this).css('overflow'));
    return $(this).css('overflow') === 'hidden';
});

Там, где у предка нет overflow: visible меняет свой CSS так, что он делает!

Также, как указано в другом месте, убедитесь, что ваш липкий элемент имеет это в CSS:

.your-sticky-element {
    position: sticky;
    top: 0;
}

Ответ 6

Мне пришлось использовать следующий CSS, чтобы заставить его работать:

.parent {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    overflow: visible;
}

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

Если выше не работает, то...

Пройдите через всех предков и убедитесь, что ни один из этих элементов не overflow: hidden. Вы должны изменить это на overflow: visible

Ответ 7

из моего комментария:

position:sticky нужна координата, чтобы указывать, где можно придерживаться

nav {
  position: sticky;
  top: 0;
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

body {
  height: 200vh;
}

<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

Ответ 8

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

Ответ 9

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

В моем случае я использовал position: sticky как элемент сетки. Это не работало, и проблема была в переполнении x: скрыто в элементе html. Как только я удалил это свойство, оно работало нормально. Было похоже, что наличие overflow-x: скрыто на элементе body работает, но пока не знаю, почему.

Ответ 10

два ответа здесь:

1. удалить свойство overflow из тега body

2. установить height: 100% к body чтобы исправить проблему с overflow-y: auto

min-height: 100% не работает вместо height: 100%

Ответ 11

Забавный момент, который не был очевиден для меня: по крайней мере, в position: sticky Chrome 70 position: sticky закрепление не применяется, если вы установили его с помощью DevTools.

Ответ 12

Я считаю, что эта статья много говорит о том, как работает sticky

Как CSS Position Sticky действительно работает! CSS-позиция sticky состоит из двух основных частей: sticky item & липкий контейнер.

Sticky Item - это элемент, который мы определили с помощью позиции: липкие стили. Элемент будет плавать, когда позиция области просмотра соответствует определению позиции, например: top: 0px.

Sticky Container - это элемент HTML, который оборачивает липкий элемент. Это максимальная площадь, в которой может плавать липкий предмет.

Когда вы определяете элемент с позицией: вы прикреплены автоматически определяя родительский элемент как липкий контейнер!

Ответ 13

ВЕРНО, что overflow необходимо удалить или установить в initial чтобы сделать position: sticky работает с дочерним элементом. Я использовал Material Design в своем приложении Angular и обнаружил, что некоторые компоненты Material изменили значение overflow. Исправление для моего сценария

mat-sidenav-container, mat-sidenav-content {
  overflow: initial;
}

Ответ 14

Если исправление danday74 не работает, проверьте, что родительский элемент имеет высоту.

В моем случае у меня было два ребенка, один плавающий влево и один плавающий вправо. Я хотел, чтобы правый плавающий объект стал липким, но мне пришлось добавить <div style="clear: both;"></div> в конце родительского элемента, чтобы придать ему высоту.