javascript - 固定标题位置错误

Question

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

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

搜索栏必须固定在完整的电影列表之后和标题之前的 bla bla block ，但是它几乎位于页面顶部(并且与上一节重叠)，而且它不会停留在整个滚动条中(全部标题 block 底部的方式)。

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

it doesn't stay for the entire scroll (all the way to the bottom of titles block).

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

its positioned almost at the top of the page (and overlaps previous section)

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