Невозможно исправить панель навигации с помощью фиксированной позиции CSS - PullRequest
Новая
       7

Невозможно исправить панель навигации с помощью фиксированной позиции CSS

0 голосов
/ 19 ноября 2018

Я довольно долго боролся с этой проблемой. Я сделал навигационную панель с двумя выпадающими меню и анимацией. Что я хочу сделать сейчас, так это исправить это всякий раз, когда прокручивается X пикселей (в моем коде я установил его на 5 пикселей). В основном, когда вы прокручиваете содержимое над панелью навигации, оно должно быть исправлено.

У меня есть тег nav со всей панелью навигации, на котором я добавил CSS (в попытке сделать его липким): 

position:sticky;
position:-webkit-sticky;
top:5px;

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

Что я проверял / пробовал:

  • Навбар не находится внутри элемента заголовка
  • Переполнение не скрыто на содержащих элементах
  • Изменение дисплея: гибкий; на родителя
  • Элемент не получает стилизацию после анимации: animation-fill-mode: none;

Я знаю, что это также можно сделать с помощью Javascript, но я действительно хочу заставить его работать, просто используя CSS.

Буду очень признателен за любую помощь!

Мой код: 

*{
    margin:0;
    padding:0;
}

body {
    margin-bottom:3000px; /*add scrolling to page*/
}

p {
    display: block;
}

.nav-container {
    /*sticky part---------------------*/
    position:sticky;
    position: -webkit-sticky;
    top:5px;

    animation-name: navbar-animation;
    animation-duration: 1s;
    animation-fill-mode: none;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-direction: normal;
    /*WEBKIT*/
    -webkit-animation-name: navbar-animation;
    -webkit-animation-duration:1s;
    -webkit-animation-fill-mode: none;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
}
@keyframes navbar-animation {
    0% {
        transform: translate(0, -60px);
        opacity:1;
    }
    100% {
        transform: translate(0, 0);
        opacity:1;
    }
}
@-webkit-keyframes navbar-animation {
    0% {
        transform: translate(0, -60px);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

.navbar {
    background-color: #BABABA;
    display:flex;
    float:left;
    width:100%;
    height: 55px;
    position:relative;
    flex-wrap:nowrap;
    min-width: 500px;
    box-shadow: 0px 2px 5px #7A7A7A;
    z-index:-2;
    justify-content:center;
}

.navbar-item, .dropdown-menu-item, .dropdown-sub1-menu-item {
    list-style:none;
}

.navbar-item {
    display:flex;
    align-items:center;
    font-family: 'Roboto Mono', monospace, Helvetica;
    font-size:17px;
}
.navbar-item a {
    display:inline-block;
    padding: 16px 15px;
}

.navbar-item a:hover {
    color:white;
}
.navbar-item:hover {
    background-color:grey;
}

.dropdown-menu {
    display: none;
    list-style:none;
    position:absolute;
    background-color: #f3f3f3;
    width: 140px;
    border-radius: 0px 0px 5px 5px;
    top:56px;
    box-shadow: 0px 1px 5px grey;

    animation-name: dropdown-menu-animation;
    animation-iteration-count: 1;
    animation-duration: 120ms;
    animation-fill-mode: none;
    animation-timing-function: linear;
    animation-direction: normal;

    /*Chrome/Safari*/
    -webkit-animation-name: dropdown-menu-animation;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 120ms;
    -webkit-animation-fill-mode: none;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: normal;
}

@keyframes dropdown-menu-animation {
    0% {
        transform: translate(0, -5px);
        opacity: 1;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@-webkit-keyframes dropdown-menu-animation {
    0% {
        transform: translate(0, -5px);
        opacity: 1;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

.dropdown-menu-item {
    display:block;
}

.dropdown-menu-item:hover {
    background-color: grey;
}

.dropdown-menu-item a {
    display: block;
    width: 100%;
    padding-left:15px;
}
a, a:visited {
    text-decoration: none;
    color:black;
}

#dropdown-toggle-hover:hover .dropdown-menu{
    display:block;
}

.dropdown-sub1-menu {
    display:none;
    position: absolute;
    left:139px;
    top: -0px;
    background-color:#f3f3f3;
    width: 158px;
    border-radius: 0px 0px 5px 0px;
    box-shadow: 0px 1px 5px grey;
    z-index: -1;

    animation-name: dropdown-sub1-menu-animation;
    animation-iteration-count: 1;
    animation-duration: 120ms;
    animation-fill-mode: none;
    animation-timing-function: linear;
    animation-direction: normal;
    /*Chrome/Safari*/
    -webkit-animation-name: dropdown-sub1-menu-animation;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 120ms;
    -webkit-animation-fill-mode: none;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: normal;
}

@keyframes dropdown-sub1-menu-animation {
    0% {
        transform: translate(-3px, 0);
        opacity:1;
    }

    100% {
        transform: translate(0, 0);
        opacity:1;
    }
}
@-webkit-keyframes dropdown-sub1-menu-animation {
    0% {
        transform: translate(-3px, 0);
        opacity:1;
    }

    100% {
        transform: translate(0, 0);
        opacity:1;
    }
}

.dropdown-sub1-menu-item {
    display:block;
}

.dropdown-sub1-menu-item:hover {
    background-color:grey;
}
#dropdown-sub1-menu-item1-toggle:hover .dropdown-sub1-menu {
    display:block;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <title>Lund</title>
</head>

<header>
    <div>
        <p>Something here</p>
    </div>
</header>

<body>
    <nav class="nav-container">
        <ul class="navbar">
            <li class="navbar-item"><a href="#">Home</a></li>
            <li class="navbar-item" id="dropdown-toggle-hover"><a href="#">Projects <i class="fas fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li class="dropdown-menu-item" id="dropdown-sub1-menu-item1-toggle"><a href="#">Project 1 <i class="fas fa-caret-right"></i></a>
                        <ul class="dropdown-sub1-menu">
                            <li class="dropdown-sub1-menu-item"><a href="#">About Project</a></li>
                            <li class="dropdown-sub1-menu-item"><a href="#">Source Code</a></li>
                            <li class="dropdown-sub1-menu-item"><a href="#">Participants</a></li>
                            <li class="dropdown-sub1-menu-item"><a href="#">Other</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-menu-item"><a href="#">Projekt 2</a></li>
                    <li class="dropdown-menu-item"><a href="#">Projekt 3</a></li>
                    <li class="dropdown-menu-item"><a href="#">Projekt 4</a></li>
                </ul></li>
            <li class="navbar-item"><a href="#">About Me</a></li>
            <li class="navbar-item"><a href="#">CV</a></li>
        </ul>
    </nav>

<main>

</main>

</body>
<script src="./scripts/scripts.js"></script>
</html>

РЕДАКТИРОВАТЬ: орфография ...

1 Ответ

0 голосов
/ 20 ноября 2018

Судя по предоставленному вами CSS / HTML, проблема заключается в следующем правиле CSS: 

body {
    margin-bottom:3000px; /*add scrolling to page*/
}

Заменить поле фактической высотой 

body {
    height:3000px; /*add scrolling to page*/
}

И position:sticky работает.

...