固定头位置错误

Question

标题到达滚动位置时将停留在顶部。

向上滚动以消除粘滞效果。

必须在电影的完整列表和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

  

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

它实际上一直保持到最后。它就在容器下面。这是因为您在z-index: 2类上设置了
.full-list。要解决此问题，只需给您的.sticky类一个更高的z-index。

  

它几乎位于页面顶部（并且与上一节重叠）

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