как изменить положение пользователя: липкое в css

У меня есть div на моем веб-сайте, а внутри него есть еще один div, я задал внутреннюю позицию div липкой и верхней: 0, но это не работает! Это мой пример кода:

Вверху: контейнер — это обычный div, а внутренний div имеет липкую позицию и top: 0, но это не работает. Любые предложения, чтобы решить эту проблему!

.sticky-div{
      background: #fed700;
      position: sticky;
      top: 0;
    }
    <div class="container">
      <nav>
        <li>item1</li>
        <li>item1</li>
      </nav>
      <div class="sticky-div">
        Sticky
      </div>
    </div>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>


html css sticky-session
person Abdallah M Yassin    schedule 12.03.2021    source источник
comment
Пожалуйста, поделитесь своим исходным кодом с html и css   -  person George Ma    schedule 12.03.2021
comment
@GeorgeMa Вот он, но обратите внимание, что я хочу, чтобы внутренний div был липким, а не родителем   -  person Abdallah M Yassin    schedule 12.03.2021
comment
Отвечает ли это на ваш вопрос? Position: липкое поведение на дочерний элемент, пока родитель не привязан?   -  person Rojo    schedule 12.03.2021
comment
Элемент будет липким при прокрутке внутри своего контейнера. Прямо сейчас ваш липкий элемент не будет «прилипать», потому что его контейнер не прокручивается, вероятно, прокручивается тело.   -  person Sjors    schedule 12.03.2021
comment
@Rojo Нет, у меня такая же проблема, но решения нет.   -  person Abdallah M Yassin    schedule 12.03.2021
comment
@Sjors Хорошо, но как это сделать?   -  person Abdallah M Yassin    schedule 12.03.2021
comment
Точно. И не будет решения с помощью липкого. Вам нужно использовать JS, чтобы получить количество прокрутки и применить различные позиции, такие как фиксированные и абсолютные.   -  person Rojo    schedule 12.03.2021
comment
@Rojo Говори вежливо и просто отвечай, если знаешь ответ, и не говори так   -  person Abdallah M Yassin    schedule 12.03.2021
comment
Я думаю, что это лучший ответ stackoverflow.com/questions/53131200/   -  person sallf    schedule 12.03.2021

Ответы (3)


arrow_upward
0
arrow_downward

Вам просто нужно удалить окружающий контейнер div или сделать этот div липким.

person Malynch    schedule 12.03.2021
comment
Хорошо, друг, но в моем случае липкий div расположен в середине страницы, а не вверху. - person Abdallah M Yassin; 12.03.2021

arrow_upward
0
arrow_downward

Он располагается в соответствии с позицией пользователя при прокрутке. Но весь контент должен быть в одном контейнере, вы можете либо поместить тексты внутри контейнера, либо переместить липкий элемент за пределы контейнера.

.sticky-div{
  background: #fed700;
  position: sticky;
  top: 0;
}
<div class="container">
  <div class="sticky-div">
    Sticky
  </div>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

person David Arruelas    schedule 12.03.2021

arrow_upward
0
arrow_downward

Я считаю, что липкое позиционирование будет работать только в том случае, если на контейнере, в котором оно находится, есть позиции стиков.

Если вы хотите, чтобы это работало, как это должно быть сделано:

* {
  padding: 0;
  margin: 0;
}

.sticky-div,
.stickyContainer {
  background: #fed700;
}

.stickyContainer {
  position: sticky;
}
<div class="sticky-div">
  Sticky
</div>
<p>text</p>
<p>text</p>

<div class="stickyContainer">
  Sticky
</div>
<p>text</p>
<p>text</p>

person GruelingPine185    schedule 12.03.2021
comment
Хорошо, друг, но в моем случае липкий div расположен в середине страницы, а не вверху. - person Abdallah M Yassin; 12.03.2021