Блог

Я создаю простой шаблон администратора для приложения. У меня есть три основных контейнера: заголовок, навигация (левая боковая панель) и содержимое, которое находится справа.

У меня есть элемент adminWrapper, который расположен относительно и обертывает навигацию и adminContent. Этот элемент является родственным элементом заголовка,

Я просмотрел другие ответы Stack Overflow, проверил, что у родителей нет свойства overflow, проверил заголовок top: 0 . Я пытался не использовать display flex в заголовке (хотя это не должно быть проблемой)

Это основная разметка:

 <header>
    <button id="adminMenu" class="menu">
        <span class="menuLine"></span>
        <span class="menuLine"></span>
        <span class="menuLine"></span>
    </button>

    <h1><a href="/admin">SLLS - Admin</a></h1>

    <a href="">
        {% include 'includes/userAccountIcon.html' %}
    </a>
</header>

<div id="adminWrapper">
    <nav>
        <ul>
            <li><a href="/">APP</a></li>
            <li><a href="">CONTENT</a></li>
            <li><a href="">MEMBERSHIP</a></li>
            <li><a href="">CLAPHAM OMNIBUS</a></li>
            <li><a href="">NEWS</a></li>    
        </ul>   
    </nav>

    <div id="adminContent">
        <div id="testContent">
            <div>Grid-1</div>
            <div>Grid-2</div>
            <div>Grid-3</div>
            <div>Grid-4</div>
            <div>Grid-5</div>
            <div>Grid-6</div>
            <div>Grid-7</div>
            <div>Grid-8</div>
            <div>Grid-9</div>
        </div>
    </div>  
</div>

//css:
#adminWrapper{
    position: relative;
}

header{
    background: var(--sllsRedBlueGradient);
    display: flex;
    padding: 1em;
    justify-content: space-between;
    align-items: center;
    top: 0;
    position: sticky;
    z-index: 3;
}

nav{
    background-color: var(--mainBlue);
    padding: 2em 0;
    transition: 0.3s ease;
    z-index: 2;
    top: 0;
    position: absolute;
    width: 0;
    left: -500px;
}

#adminContent{
    background-color: red;
    padding: 2em;
    top: 0;
    width: 100%;
    position: absolute;
    transition: 0.3s ease;
}
  

Чтобы проверить это, я создал lorem3000, чтобы увидеть,
Привязка позиции ДЕЙСТВИТЕЛЬНО РАБОТАЕТ, но только на короткое время,
после того, как она пересекает определенный порог, она поднимается и исчезает и не залипает,

Я создал прозрачный фон над заголовком, чтобы увидеть, что происходит на самом деле,

Происходит то, что sticky работает только до тех пор, пока навигационная панель слева находится в пределах досягаемости, даже если она скрыта.

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

Когда я убираю #adminContent из div, он работает отлично, однако в скрипке он все равно работает независимо,