顯示頁眉和隱藏頁腳減慢-有解無憂

頁眉和頁腳應該以兩種不同的方式顯示和隱藏。當用戶向下滾動時，標題淡入。當用戶在該區域上移動時，頁腳淡入。當我到達頂部時，它會很快再次彈出。淡入應該和淡出一樣快地淡入。與頁腳的情況類似，只要用戶不再將滑鼠移到它上面，頁腳應該再次緩慢向下移動。有人能幫助我嗎？

 // 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" class="header">Text 1</header>
  <div class="container">

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

uj5u.com熱心網友回復：

只需將也添加0.8s ease到組件樣式中。因此，.header而不是transition: transform 250ms;使用類似transition: top 0.8s ease;. 如果您希望淡入和淡出相同，頁腳也一樣。

// 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" class="header">Text 1</header>
  <div class="container">

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/471226.html

標籤：javascript css

上一篇：點擊獲取圖片坐標

下一篇：從陣列中獲取Firestore物件屬性