Fixed Header is wrongly positioned

Question

The header will stick to the top when you reach its scroll position.

Scroll back up to remove the sticky effect.

Search bar has to become fixed after FULL LIST OF MOVIES and bla bla block before titles, however its positioned almost at the top of the page (and overlaps previous section), also it doesn't stay for the entire scroll (all the way to the bottom of titles 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).

It actually does stay till the end. It is just underneath the containers. This is because you set a
z-index: 2 on your .full-list class. To fix it just give your .sticky class a higher z-index.

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

If I understand you correctly you have a problem with your sticky header, because it is not fixed to the top. In your .find class you forgot to remove the margin. Overwrite it in your .sticky class (or remove it) and it should work fine.