show header and hide footer slow down-CodePudding

the header and footer should be shown and hidden in 2 different ways. The header fades in when the user scrolls down. The footer fades in when the user moves over the area. When I get to the top it pops up again pretty quickly. Fade in should be faded in as quickly as faded out. The situation is similar with the footer as soon as the user no longer moves the mouse over it, the footer should slowly move down again. Can someone help me please?

 // When the user scrolls the page, execute myFunction
    window.onscroll = function () { myFunction() };

    // Get the header
    var header = document.getElementById("myHeader");

    // Get the offset position of the navbar
    var 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");
      }     
    }

html,
    body {
      height: 100%;
      margin: 0;
    }

    html,
    body,
    header,
    footer {
      width: 100%;
    }

    header,
    footer {
      height: 100px;
      left: 0px;
      margin: 0px;
      color: beige;
      z-index: 99999;
    }
    
    .header {
      position: fixed;
      background-color: black;
      top: 0px;
      transition: transform 250ms;
    }

    .sticky {
      position: fixed;
      top: -100px;
      transition: top 0.8s ease;
    }

    footer {
      position: fixed;
      height: 200px;
      bottom: -100px;
    }

    footer:hover {
      bottom: 0px;
      transition: bottom 0.8s ease;
    }

    footer div {
      height: 100px;
    }

    .container {
      background-color: grey;
      height: 100%;
      padding: 0px;

    }

    body {
      position: relative;
      margin: 0 auto;
    }

    .block1,
    .block2,
    .block3 {
      min-height: 400px;
    }

    .block1 {
      background-color: #FA4197;
    }

    .block2 {
      background-color: #33D89D;
    }

    .block3 {
      background-color: #FDC800;
    }

    .row {
      height: auto;
      margin: 0px;
      left: 0px;
    }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
  <header id="myHeader" >Text 1</header>
  <div >

    <div >
      <div >Text 2</div>
      <div >Text 3</div>
      <div >Text 4</div>
    </div>
    <div >
      <div >Text 5</div>
      <div >Text 6</div>
      <div >Text 7</div>
    </div>
    <div >
      <div >Text 8</div>
      <div >Text 9</div>
      <div >Text 10</div>
    </div>
  </div>
  <footer>
    <div style="background: none"></div>
    <div style="background-color: black">Text 11</div>
  </footer>
  </body>

CodePudding user response：

Just add the 0.8s ease to the component style as well. So in .header instead of transition: transform 250ms; use something like transition: top 0.8s ease;. Same for footer if you want the fade-in and fade-out to be same.

// When the user scrolls the page, execute myFunction
    window.onscroll = function () { myFunction() };

    // Get the header
    var header = document.getElementById("myHeader");

    // Get the offset position of the navbar
    var 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");
      }     
    }

html,
    body {
      height: 100%;
      margin: 0;
    }

    html,
    body,
    header,
    footer {
      width: 100%;
    }

    header,
    footer {
      height: 100px;
      left: 0px;
      margin: 0px;
      color: beige;
      z-index: 99999;
    }
    
    .header {
      position: fixed;
      background-color: black;
      top: 0px;
      transition: top 0.8s ease;
    }

    .sticky {
      position: fixed;
      top: -100px;
      transition: top 0.8s ease;
    }

    footer {
      position: fixed;
      height: 200px;
      bottom: -100px;
      transition: bottom 0.8s ease;
    }

    footer:hover {
      bottom: 0px;
      transition: bottom 0.8s ease;
    }

    footer div {
      height: 100px;
    }

    .container {
      background-color: grey;
      height: 100%;
      padding: 0px;

    }

    body {
      position: relative;
      margin: 0 auto;
    }

    .block1,
    .block2,
    .block3 {
      min-height: 400px;
    }

    .block1 {
      background-color: #FA4197;
    }

    .block2 {
      background-color: #33D89D;
    }

    .block3 {
      background-color: #FDC800;
    }

    .row {
      height: auto;
      margin: 0px;
      left: 0px;
    }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
  <header id="myHeader" >Text 1</header>
  <div >

    <div >
      <div >Text 2</div>
      <div >Text 3</div>
      <div >Text 4</div>
    </div>
    <div >
      <div >Text 5</div>
      <div >Text 6</div>
      <div >Text 7</div>
    </div>
    <div >
      <div >Text 8</div>
      <div >Text 9</div>
      <div >Text 10</div>
    </div>
  </div>
  <footer>
    <div style="background: none"></div>
    <div style="background-color: black">Text 11</div>
  </footer>
  </body>