Почему моя позиция: липкая не работает?

Question

Я хочу, чтобы моя панель навигации была липкой, но она не работает. Я также использую некоторые базовые jQuery для переключения слайд-шоу для класса "dropmenu". Я также попробовал положение для <a> элемент, и все же это не будет работать. Это HTML и CSS:

.dropmenu {
  display: block;
  height: 65px;
  width: 100%;
  background: url("images/menuicon.png") no-repeat 98% center;
  background-color: #404040;
  cursor: pointer;
}

nav ul {
  padding: 0;
  overflow: hidden;
  background: #505050;
  display: none;
}

nav ul li {
  display: block;
  float: none;
  text-align: left;
  width: 100%;
  margin: 0;
}

nav ul li a {
  color: white;
  padding: 10px;
  border-bottom: 1px solid #404040;
  display: block;
  margin: 0;
}

div.sticky {
  position: sticky;
  top: 0;
}

    <div class="center">
        <header>
            <img class="headerImage" src="images/header.png"/>
            <hr class="menu">
            <div class="sticky">
                <a class="dropmenu"></a>
                <nav class="desktop">
                    <ul>
                        <li><a href="index.php">Sertet</a></li>
                        <li><a href="index.php">Rtretrti</a></li>
                        <li><a href="photos.php">ertettterli</a></li>
                        <li><a href="index.php">retemi</a></li>
                        <li><a href="index.php">Kerterti</a></li>
                    </ul>
                </nav>
            </div>
            </header>
        <hr class="menu">
   <p>content goes here</p>
</div>

Так в чем же проблема?

Answer 1

Когда вы размещаете position:sticky элемент внутри другого элемента вещи могут быть хитрыми, вам может понадобиться установить свойство display ваших родительских элементов на что-то кроме block.

попробуйте добавить следующее:

.center, header{
  display:initial;
}

Вы, вероятно, можете установить его как inline или inline-block, в зависимости от ваших потребностей.

Вот ваш фрагмент с этим, добавленный вместе с парой других вещей только для демонстрации:

body{
  height:200vh;
}

.center, header{
  display:initial;
}

.dropmenu {
  display: block;
  height: 65px;
  width: 100%;
  background: url("images/menuicon.png") no-repeat 98% center;
  background-color: #404040;
  cursor: pointer;
}

nav ul {
  padding: 0;
  overflow: hidden;
  background: #505050;
  display: none;
}

nav ul li {
  display: block;
  float: none;
  text-align: left;
  width: 100%;
  margin: 0;
}

nav ul li a {
  color: white;
  padding: 10px;
  border-bottom: 1px solid #404040;
  display: block;
  margin: 0;
}

div.sticky {
  position: sticky;
  top: 0;
}

<div style="height:100px; background:green;"></div>
    
    <div class="center">
        <header>
            <img class="headerImage" src="images/header.png"/>
            <hr class="menu">
            <div class="sticky">
                <a class="dropmenu"></a>
                <nav class="desktop">
                    <ul>
                        <li><a href="index.php">Sertet</a></li>
                        <li><a href="index.php">Rtretrti</a></li>
                        <li><a href="photos.php">ertettterli</a></li>
                        <li><a href="index.php">retemi</a></li>
                        <li><a href="index.php">Kerterti</a></li>
                    </ul>
                </nav>
            </div>
            </header>
        <hr class="menu">
   <p>content goes here</p>
</div>

Answer 2

Обычно это из-за какого-то родительского свойства "переполнения".

Если у какого-либо родителя / предка липкого элемента установлено любое из следующих свойств переполнения, position: sticky не будет работать:

• переполнение: скрыто
• переполнение: прокрутка
• переполнение: авто

Вот что мне помогло. Просто скопируйте / вставьте следующий фрагмент в консоль своего браузера и определите все родительские элементы, для свойства переполнения которых установлено значение, отличное от видимого:

    // Change to your STICKY element
    let parent = document.querySelector('.sticky').parentElement;
    
    while (parent) {
        const hasOverflow = getComputedStyle(parent).overflow;
        if(hasOverflow !== 'visible') {
            console.log(hasOverflow, parent);
        }
        parent = parent.parentElement;
    }

Тогда это в основном проблема установки правильного свойства переполнения для правильного элемента.

Answer 3

Это не решение этой конкретной проблемы, но на случай, если это кому-то поможет.

Я случайно удалил top Правило CSS при рефакторинге кода, добавление его обратно помогло мне:

.my-elem {
  position: sticky;
  top: 0;
}

Answer 4

Для меня я обнаружил, что overflow: hidden; в родительском контейнере было то, что нарушало position: sticky;. Если видно переполнение на родительском элементе, липка начинает работать.

Answer 5

У меня не было родительских элементов с переполнением, поэтому мое решение было таким:

      html, body {
  height: 100%;
  overflow: auto;
}

Answer 6

Если вы используете загрузчик, просто напишите class="sticky-top" и это делает всю магию

Answer 7

В вашем классе div.sticky position:sticky не действителен Пытаться " position:fixed"