Липкая позиция CSS работает только частично - PullRequest
Новая
       9

Липкая позиция CSS работает только частично

0 голосов
/ 22 февраля 2019

Я пытаюсь сделать сайт, на котором сверху есть строка меню.на некоторых особенно длинных страницах я не хочу, чтобы пользователю приходилось полностью прокручивать назад, чтобы получить к нему доступ.Когда я использую позицию sticky, это работает, но затем после определенного количества прокрутки исчезает.Расстояние, на котором оно исчезает, постоянно.Кто-нибудь знает, как это исправить?

html: 

<nav>
<ul class="menu-area">
    <li><a href="./index.html">Home</a></li>
    <li><a href="./Acclaims.html">Acclaims</a></li>
    <li><a href="https://www.youtube.com/user/asdf" target="_blank">Youtube</a></li>
    <li>
        <a href="https://www.google.com/search?asdf"
           target="_blank">Images</a></li>
    <li><a href="./contact.html">Contact</a></li>
</ul>

css: 

.menu-area li a {
    text-decoration: none;
    color: #000;
    letter-spacing: 4px;
    text-transform: uppercase;
    display: block;
    padding: 0 25px;
    font-size: 14px;
    line-height: 30px;
    z-index: 1;
}

.menu-area li {
    list-style: none;
    display: inline-block;
}

nav {
    padding: 10px 20px 10px 10px;
    text-align: center;
    background: #eaedf2;
    margin: auto;
    width: calc(100%);

    position: sticky;
    top: 0;
}

.menu-area li a:hover {
    background: black;
    color: #eaedf2;
}

1 Ответ

0 голосов
/ 22 февраля 2019

Не могли бы вы предоставить свой код HTML + CSS на codepen (или как вам удобнее)?

С моей точки зрения, позиция с привязкой не готова для продуктивных сайтов, по крайней мере, без надлежащего отката (https://caniuse.com/#search=position%3A%20sticky).

Подумайте о том, чтобы просто использовать решение javascript. Множество решений делают это. Еще один из моих любимых вариантов: Headroom.js - https://wicky.nillia.ms/headroom.js

Если вы просто хотитечтобы использовать решение JS в качестве запасного варианта, попробуйте следующее: https://modernizr.com/download?csspositionsticky-setclasses&q=position

...