时间戳

首页 > 解决方案 > 无法使用粘性位置 CSS 固定导航栏

html - 无法使用粘性位置 CSS 固定导航栏

问题描述

我一直在努力解决这个问题。我制作了一个带有两个下拉菜单和动画的导航栏。我现在想要做的是让它固定，每当滚动 X 像素时（我在我的代码中将它设置为 5px）。基本上，当您滚动浏览导航栏上方的内容时，它应该是固定的。

我有一个带有整个导航栏的导航标签，我在其上添加了 CSS（试图使其具有粘性）：

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

我已经阅读了很多关于这个问题的其他帖子，但似乎在我的代码中找不到任何提到的问题..

我检查过/尝试过的内容：

我知道这也可以用 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>

编辑：拼写...

标签： htmlcsssticky

解决方案

根据您提供的 CSS/HTML，问题似乎是这个 CSS 规则：

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

用实际高度替换边距

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

和position:sticky作品。

推荐阅读