Можете ли вы попробовать со следующим ...

я есть элемент, который я делаю липким с позиции sticky:

#header {
    position: sticky;
    width: 100vw;
    top: 0;
}
<app-header id="header"></app-header>

И это прекрасно работает, но я понял, что если я использую:

body {
  overflow-x: hidden;
}

Это ломает липкий, и мне нужно установитьbody overflow-x вhiddenКак я могу это исправить, только с помощью решения CSS, без решений JS?

 protoEvangelion09 янв. 2019 г., 18:55
Единственным способом, которым я смог это исправить, былоoverflow-x с чем-то вродеoverflow-x: initial;, Год спустя иposition: sticky больше не является экспериментальным и работает кросс-браузер (минус хороший старый IE) :)
 Leff03 нояб. 2017 г., 13:36
Да, не знал об этом, спасибо за указание на это
 UncaughtTypeError03 нояб. 2017 г., 13:21
Обратите внимание, что sticky, по спецификации, не будет работать внутри элемента с переполнением: hidden или auto. Также,position: sticky это экспериментальный API, и его не следует использовать в производстве, а только для хедс-апа (на случай, если вы еще этого не знаете)видеть: developer.mozilla.org/en-US/docs/Web/CSS/position#sticky

Ответы на вопрос(1)

ОБНОВИТЬ:

Firefox v64.0 и Chrome v71.0.3578.98

добавленнойposition: -webkit-sticky; для сафари.

К сожалению, в спецификации не слишком ясно о последствияхoverflow-x: hidden; на позиции липкая, но есть способ это исправить. К счастью, есть проблема, которую мы надеемся исправить:https://github.com/w3c/csswg-drafts/issues/865.

простое решение это удалить или сброситьoverflow-x: hidden; от каждого предка элемента, который вы хотите иметьposition: sticky;, Тогда вы можете иметьoverflow-x: hidden; на теле и будет работать!

Также дважды проверьте, что у вас нет переполнения для тегов body и html, о которых я подробно рассказал здесь:https://stackoverflow.com/a/54116725/6502003

Вот ручка, если вы хотите поиграть с ней:https://codepen.io/RyanGarant/pen/REYPaJ

/* 
  Try commenting out overflow on body style and uncommenting
  overflow on .overflow-x-hidden class and you will see 
  position sticky stop working!  
*/

body {
  overflow-x: hidden;
}

.overflow-x-hidden {
/*   overflow-x: hidden; */
  border: 1px solid blue;
}

h1 {
  background: palevioletred;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.tall {
  background: linear-gradient(to bottom, paleturquoise, white);
  height: 300vh;
  width: 100%;
}
<div class="overflow-x-hidden">
  <h1>I want to be sticky!</h1>
  
  <div class="tall"></div>
</div>

Ваш ответ на вопрос