Блог

  // 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>