固定页眉位置错误

Question

当您到达其滚动位置时，标题将粘在顶部。

向上滚动以移除粘性效果。

搜索栏必须在 FULL LIST OF MOVIES 和 bla bla 块之后固定在标题之前，但它几乎位于页面顶部（并与前一部分重叠），它也不会停留在整个滚动（所有标题块底部的路径）。

Codepen

 // When the user scrolls the page, execute myFunction 
    window.onscroll = function() {myFunction()};
    
    // Get the header
    let header = document.querySelector(".find");
    
    // Get the offset position of the navbar
    let sticky = header.offsetTop;
    
    // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
    function myFunction() {
      if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
      } else {
        header.classList.remove("sticky");
      }
    }

body,
* {
    top: 0;
    left: 0;
    margin: 0;
    background-color: #F5FFFA;
    overflow: scroll;
}


.bar-chart {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}


.full-list {
    z-index: 2;
    width: auto;
    display: block;
    line-height: 15px;
    text-align: center;
    position: relative;
    margin-top: 50%;
    padding-top: 84px;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    background-color: #171618;
    top:0;
    max-height: 3000px;
}

.titles {
    position: relative;
    float: left;
    display: inline-block;
    font-family: 'Anonymous Pro', monospace;
    font-size: 10px;
    padding: 10px;
    color: #b2abb6;
    line-height: 1.5px;
    background-color: #171618;
    cursor: pointer;
    pointer-events: visible;
}

  .bridge {
    top:0;
    max-width: 40rem;
    margin: 0 auto;
    padding: 1em .75rem;
    padding-bottom: 0;
    background-color: #171618;
    line-height: 27px;
 }

.find {
    position: relative;
    width: 100%;
    height: 40px;
    background-color: #171618;
    overflow: hidden;
    overflow-x: hidden;
    margin-top: 50px;
    margin-bottom: 50px;
}

.search-box {
    position: relative;
    top: -10px;
    margin: 0 auto;
    width: 20rem;
    height: 40px;
    font-size: 40rem;
    border-bottom: 1px solid #b2abb6;
    background-color: #171618;
    display: block;
    margin-bottom: 3rem;
    overflow: hidden;
    overflow-x: hidden;
}

input {
    top: -186px;
    width: 100%;
    font-size: 21px;
    font-weight: 100;
    background-color: #171618;
    color: #EFEFEF;
    border: none;
    overflow-x: hidden;
    position: relative;
}

input:focus {
    outline: none;
}

.search-icon {
    position: relative;
    left: 139px;
    top: -403px;
    background-color: #171618;
    -webkit-text-fill-color: #171618;
    background: transparent;
    overflow: hidden;
}

.search-icon svg {
    fill: #EFEFEF;
    background-color: #171618;
    width: 20px;
    height: 20px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}
.sticky + .titles {
  padding-top: 102px;
}

<div class='visual'></div>
<div class='full-list'>
    <h1>FULL LIST OF MOVIES</h1>
    <div class='bridge'>
        <h3>To see the entire list of movies,
            <span style='color:#E85C86;background-color: #171618;'>below you can search for any of the 2,000 movies </span>, and bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla .
        </h3>
    </div>
    <div class='find'>
        <div class='search-box'>
            <input type="text" name="title" placeholder="Find a movie">
            <div class='search-icon'>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1" width="32px" height="32px">
                        <g id="surface1">
                        <path style=" " d="M 19 3 C 13.488281 3 9 7.488281 9 13 C 9 15.394531 9.839844 17.589844 11.25 19.3125 L 3.28125 27.28125 L 4.71875 28.71875 L 12.6875 20.75 C 14.410156 22.160156 16.605469 23 19 23 C 24.511719 23 29 18.511719 29 13 C 29 7.488281 24.511719 3 19 3 Z M 19 5 C 23.429688 5 27 8.570313 27 13 C 27 17.429688 23.429688 21 19 21 C 14.570313 21 11 17.429688 11 13 C 11 8.570313 14.570313 5 19 5 Z "/>
                        </g>
                    </svg>
            </div>
        </div>
    </div>
</div>

Answer 1

它不会停留在整个滚动（一直到标题块的底部）。

它确实会一直持续到最后。它就在容器下方。这是因为您在 .full-list 类上设置了
z-index: 2。要修复它，只需给您的.sticky 类提供更高的z-index。

它几乎位于页面顶部（并与前一部分重叠）

如果我对您的理解正确，您的粘性标题有问题，因为它没有固定在顶部。在您的.find 课程中，您忘记删除margin。在您的 .sticky 类中覆盖它（或删除它），它应该可以正常工作。