html - 我的导航栏没有保持在顶部，它会一直滚动，如何让它保持在顶部

问题描述

任何人都可以帮助我让我的导航保持在顶部？所以它不会留下来，我尝试每个位置绝对，粘性，固定，但不工作是在我滚动时继续关注。我没有使用任何框架 css，如果我使用框架 css，我的视差滚动就坏了._。

<-- 评论-->

嗯，stackoverflow 不让我发帖只是主要是代码...所以这只是我要填写的随机词。测试 1 2 3 bla bla bla

https://codepen.io/BlaupilzHD/pen/MWwGpMY

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      text-decoration: none;
      list-style: none;
    }

    html,
    body {
      background-color: #FEDCC8;
      height: 100%;
    }

    #navbar {
      position: absolute;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
    }

    nav {
      height: 80px;
      width: 100%;
    }

    label.logo {
      color: rgb(255, 255, 255);
      font-size: 24px;
      line-height: 80px;
      padding: 0 100px;
      font-weight: bold;
    }


    .checkbtn {
      font-size: 30px;
      color: rgb(255, 255, 255);
      float: right;
      line-height: 80px;
      margin-right: 40px;
      cursor: pointer;
      display: none;
    }

    #check {
      display: none;
    }

    .cv {
      border-radius: 20px;
      margin: 18px 30px;
      padding: 15px 30px;
      color: azure;
      background-color: #2D112B;
      float: right;
    }

    /* Parallax Scroll */

    .parallax {
      -webkit-perspective: 100px;
              perspective: 100px;
      height: 100vh;
      overflow-x: hidden;
      overflow-y: auto;
      position: absolute;
      top: 0;
      left: 50%;
      right: 0;
      bottom: 0;
      margin-left: -1500px;
    }

    .parallax__layer {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    .parallax__layer img {
      display: block;
      position: absolute;
      bottom: 0;
    }

    .parallax__cover {
      background: #2D112B;
      display: block;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      height: 2000px;
      z-index: 2;
    }

    .parallax__layer__0 {
      -webkit-transform: translateZ(-300px) scale(4);
              transform: translateZ(-300px) scale(4);
    }

    .parallax__layer__1 {
      -webkit-transform: translateZ(-250px) scale(3.5);
              transform: translateZ(-250px) scale(3.5);
    }

    .parallax__layer__2 {
      -webkit-transform: translateZ(-200px) scale(3);
              transform: translateZ(-200px) scale(3);
    }

    .parallax__layer__3 {
      -webkit-transform: translateZ(-150px) scale(2.5);
              transform: translateZ(-150px) scale(2.5);
    }

    .parallax__layer__4 {
      -webkit-transform: translateZ(-100px) scale(2);
              transform: translateZ(-100px) scale(2);
    }

    .parallax__layer__5 {
      -webkit-transform: translateZ(-50px) scale(1.5);
              transform: translateZ(-50px) scale(1.5);
    }

    .parallax__layer__6 {
      -webkit-transform: translateZ(0px) scale(1);
              transform: translateZ(0px) scale(1);
    }

            <nav id = "navbar">
                <input type = "checkbox" id = "check">
                <label for = "check" class = "checkbtn">
                    <i class="fa fa-bars"></i>
                </label>
                <label class = "logo">My Name</label>
                <button class="cv">Download CV</button>
            </nav>

            <div class="parallax">
                <div class="parallax__layer parallax__layer__0">
                    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true" />
                </div>
                <div class="parallax__layer parallax__layer__1">
                    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true" />
                </div>
                <div class="parallax__layer parallax__layer__2">
                    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true" />
                </div>
                <div class="parallax__layer parallax__layer__3">
                    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true" />
                </div>
                <div class="parallax__layer parallax__layer__4">
                    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true" />
                </div>
                <div class="parallax__layer parallax__layer__5">
                    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true" />
                </div>
                <div class="parallax__layer parallax__layer__6">
                    <img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true" />
                </div>
                <div class="parallax__cover"></div>
            </div>
        </body>

标签： htmlcss

html - 我的导航栏没有保持在顶部，它会一直滚动，如何让它保持在顶部

问题描述

解决方案

推荐阅读