Tutorial untuk melaksanakan bar navigasi yang menunjukkan/menyembunyikan dan mengaktifkan pautan navigasi semasa menatal

Dokumen ini bertujuan untuk menyediakan tutorial yang membolehkan bar navigasi secara automatik menunjukkan dan menyembunyikan sebagai skrol halaman, dan pautan navigasi untuk diaktifkan secara dinamik berdasarkan kedudukan Viewport semasa dan klik peristiwa. Kami akan menggunakan HTML, CSS, dan JavaScript (termasuk jQuery) untuk mencapai kesan ini. Melalui artikel ini, anda akan belajar bagaimana untuk mendengar peristiwa tatal, mengubahsuai gaya CSS secara dinamik, dan mengendalikan keadaan pengaktifan pautan navigasi.

Bar navigasi menatal untuk menunjukkan/bersembunyi

Kunci untuk menyedari bahawa bar navigasi ditunjukkan dan tersembunyi semasa menatal adalah untuk mendengar peristiwa Window.onscroll dan secara dinamik mengubah suai atribut gaya teratas bar navigasi berdasarkan perbandingan antara kedudukan tatal semasa dan kedudukan tatal sebelumnya.

 var prevScrollPos = window.pageyOffset;

window.onscroll = function () {
  var currentscrollpos = window.pageyOffset;
  jika (prevScrollpos> currentscrollpos) {
    document.getElementById ("NavBarsection"). Style.top = "0";
  } else {
    document.getElementById ("NavBarsection"). Style.top = "-70px";
  }
  prevScrollPos = currentscrollpos;
};

Kod ini mula -mula memperoleh kedudukan skrol awal halaman, prevScrollpos. Kemudian dalam fungsi window.onScroll, dapatkan kedudukan tatal semasa currentscrollpos dan bandingkan dengan prevScrollpos. Jika prevscrollpos lebih besar daripada currentscrollpos, ini bermakna skrol pengguna naik. Pada masa ini, tetapkan harta atas bar navigasi kepada "0" untuk memaparkannya. Sebaliknya, jika pengguna menatal ke bawah, tetapkan atribut atas kepada "-70px" untuk menyembunyikannya. Akhirnya, kemas kini prevScrollPos ke currentscrollpos untuk perbandingan pada kali berikutnya anda tatal.

Perkara yang perlu diperhatikan:

• Pastikan elemen Navbar anda mempunyai atribut id = "NavBarsection" supaya kod JavaScript dapat menemuinya.
• Laraskan nilai -70px mengikut ketinggian bar navigasi anda.
• Untuk membuat kesan peralihan lebih lancar, anda boleh menambah atribut peralihan ke bar navigasi di CSS.

Aktifkan pautan navigasi

Mengaktifkan pautan navigasi memerlukan dua fungsi: Pertama, apabila anda mengklik pautan navigasi, tatal dengan lancar ke bahagian yang sepadan dan mengaktifkan pautan; Kedua, apabila skrol halaman, pautan navigasi yang sepadan diaktifkan secara automatik berdasarkan kedudukan viewport semasa.

Klik untuk mengaktifkan

Kod berikut menggunakan jQuery untuk mencapai kesan skrol dan pengaktifan yang lancar semasa mengklik pautan navigasi:

 $ (dokumen) .ready (fungsi () {
  $ (dokumen) .on ("tatal", onscroll);

  // smoothscroll
  $ (". navbar-toggler"). pada ("klik", fungsi (e) {
    E.PreventDefault ();
    $ (dokumen) .off ("tatal");

    $ (".
      $ (ini) .removeClass ("aktif");
    });
    $ (ini) .addclass ("aktif");

    var sasaran = $ (ini) .paren ("div.container-fluid"). Cari (". navbar-brand"). attr ("href")
    menu = sasaran;
    $ sasaran = $ (sasaran);
    $ ("html, badan")
      .Stop ()
      .animate ({
          ScrollTop: $ sasaran.offset (). Top 2,
        },
        500,
        "Swing",
        fungsi () {
          window.location.hash = target;
          $ (dokumen) .on ("tatal", onscroll);
        }
      );
  });
});

Kod ini terlebih dahulu mengikat acara tatal ke fungsi onScroll selepas dokumen dimuatkan. Kemudian, dengar acara klik pautan navigasi. Apabila pautan diklik, mula -mula menghalang tingkah laku lalai, kemudian keluarkan kelas aktif semua pautan navigasi dan tambahkan kelas aktif untuk pautan yang diklik sekarang. Seterusnya, gunakan fungsi Animate untuk mencapai kesan menatal lancar ke bahagian sasaran. Selepas menatal selesai, kemas kini nilai hash URL dan rebind acara tatal.

Perkara yang perlu diperhatikan:

• Pastikan untuk memasukkan perpustakaan jQuery.
• E.PreventDefault () digunakan untuk mengelakkan tingkah laku lompat pautan lalai.
• $ (dokumen) .off ("tatal") dan $ (dokumen) .on ("tatal", onscroll) digunakan untuk menjeda dan meneruskan pemantauan acara menatal semasa proses menatal untuk mengelakkan konflik.
• 500 adalah tempoh animasi dan boleh diselaraskan seperti yang diperlukan.
• Swing adalah fungsi pelonggaran animasi, dan fungsi pelonggaran lain juga boleh dipilih.

pengaktifan tatal

Kod berikut melaksanakan pengaktifan automatik pautan navigasi yang sepadan berdasarkan kedudukan paparan semasa apabila halaman ditatal:

 fungsi onScroll (event) {
  var scrollpos = $ (dokumen) .scrollTop ();
  $ ("#navBarsection a"). Setiap (fungsi () {
    var currlink = $ (ini);
    var refelement = $ (currlink.attr ("href"));
    jika (
      refelement.position (). atas  ScrollPos
    ) {
      $ ("#navBarsection ul li a"). penyingkiran ("aktif");
      currlink.addclass ("aktif");
    } else {
      currlink.removeclass ("aktif");
    }
  });
}

Kod ini pertama mendapat tatal kedudukan tatal semasa. Kemudian, berulang melalui semua pautan navigasi. Untuk setiap pautan, dapatkan elemen seksyen yang sepadan dengan atribut HREFnya. Jika elemen seksyen berada dalam pandangan, keluarkan kelas aktif dari semua pautan navigasi dan tambahkan kelas aktif untuk pautan semasa. Jika tidak, keluarkan kelas aktif yang dihubungkan sekarang.

Perkara yang perlu diperhatikan:

• Pastikan atribut HREF bagi setiap pautan navigasi sepadan dengan atribut ID elemen seksyen yang sepadan.
• refelement.position (). Atas mendapat jarak elemen seksyen relatif ke bahagian atas dokumen.
• Refelement.Height () mendapat ketinggian elemen seksyen.

Kod sampel lengkap

Berikut adalah kod sampel HTML, CSS dan JavaScript yang lengkap:

 



  <meta charset="utf-8">
  <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
  <tirly> navbar tatal & aktif 
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>




  <div class="container" id="navbarsection">
    <nav class="navbar navbar-expand-lg" aria-label="offcanvas navbar besar">
      <div class="container-fluid">
        <a class="navbar-brand" href="#herosection"> <img src="./%20aset/logo.svg" alt=""> </a>
        <butang kelas="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasnavbar2" aria-controls="offcanvasnavbar2" aria-m-label="togol navigasi">
            <span class="navbar-toggler-icon"> </span>
          </butang>
        <div class="offcanvas offcanvas-end mx-auto" tabindex="-1" id="offcanvasnavbar2" aria-labelledby="offcanvasnavbar2label">
          <div class="offcanvas-header">
            <a class="navbar-brand" href="#herosection"> <img src="./%20aset/logo.svg" alt=""> </a>
            <button type="Button" data-bs-dismiss="OffCanvas" aria-label="Close" class="CloseButton">
                <img class="closeicon" src="./%20aset/cross.png" alt="icon tutup">
              
             </button>->
          </div>
          <div class="offcanvas-body">
            <ul class="Navbar-nav Align-Items-Center MX-AUTO MB-2 MB-LG-0">
              <li class="nav-item herosection">
                <a class="nav-link active" href="#herosection"> mengenai kami </a>
              </li>
              <li class="nav-item Servicesection">
                <a class="nav-link" href="#servicesection"> Services </a>
              </li>
              <li class="nav-item worksection">
                <a class="nav-link" href="#worksection"> work </a>
              </li>
            </ul>
            <div class="contact-us-button">
              <button class="BTN Blue-Button">
                  <a href="#contactsection" style="text-decoration: none; color: white"> hubungi kami </a>
                
            </button>
</div>
          </div>
        </div>
      </div>
    </nav>
  </div>

  <seksyen id="Herosection">
    Seksyen Hero
  </seksyen>
  <seksyen id="Borksection">
    Bahagian kerja
  </seksyen>
  <seksyen id="AboutusSection">
    Mengenai seksyen kami
  </seksyen>
  <seksyen id="Servicesection">
    Seksyen Perkhidmatan
  </seksyen>
  <seksyen id="ContactSection">
    Bahagian kenalan
  </seksyen>

  <script src="script.js"> </script>


</tirly>

 * {
  Margin: 0px;
  Padding: 0px;
  saiz kotak: kotak sempadan;
  Font-Family: 'Poppins', Sans-Serif! Penting;
}

#navBarsection {
  Kedudukan: melekit! Penting;
  Atas: 0; /*Tambahkan baris ini*/
  Latar Belakang: Putih! Penting;
  Peralihan: Semua .25s mudah-dalam-keluar 0s! Penting;
  Z-indeks: 1000; /* Pastikan bar navigasi berada di atas kandungan lain*/
}

Bahagian {
  margin-bottom: 150px;
  Ketinggian: 100VH;
  Paparan: Flex;
  Align-item: pusat;
  Justify-Content: Center; /* Kandungan pusat mendatar*/
  saiz font: 2EM; /* Meningkatkan saiz fon untuk memudahkan melihat kesan menatal*/
}

.blue-button {
  Padding: 12px 24px! Penting;
  latar belakang warna: #3130F2! Penting;
  Border-Radius: 37px! Penting;
  Warna: Putih! Penting;
  Font-Weight: 700! Penting;
}

.Blue-button: Hover {
  latar belakang warna: #FECD00! Penting;
  /* warna: #3130F2! Penting; */
  Peralihan: Semua .25s mudah-dalam-keluar 0s! Penting;
}

.closebutton {
  latar belakang warna: RGBA (254, 205, 0, 0.4);
  /* Sempadan: Tiada; */
  Sempadan: 1px pepejal telus;
  Radius sempadan: 10px;
}

.closebutton: hover {
  latar belakang warna: RGBA (254, 205, 0, 0.8);
  /* latar belakang warna: RGBA (49, 48, 242, 0.5); */
  /* Sempadan: Tiada; */
  Sempadan: 1px pepejal #3130F2;
  Radius sempadan: 10px;
}

.Offcanvas-backdrop.show {
  Kelegapan: 0.8;
}

.Offcanvas-backdrop {
  latar belakang warna: #8E90A6;
}

.closeicon {
  lebar: 40px;
  Ketinggian: 40px;
}

.NAV-LINK {
  Padding: 0px! Penting;
  Font-Weight: 400;
  saiz font: 20px! Penting;
  Talian ketinggian: 40px! Penting;
  Surat-Spacing: 0.08EM! Penting;
}

.NAV-LINK: Hover {
  Warna: #3130F2! Penting;
  Sempadan-Bottom-Left-Radius: 0%;
  Sempadan-Bottom-Right-Radius: 0%;
  Sempadan-Bottom: 3PX Solid #FECD00! Penting;
  Kursor: Pointer! Penting;
  Peralihan: Semua .18s mudah-dalam-keluar 0s! Penting;
}

.NAV-item: Aktif {
  latar belakang warna: #8e90a6! Penting;
}

.NAVBAR-NAV .NAV-LINK.ACTIVE,
.NAVBAR-NAV .SHOW> .NAV-LINK {
  Warna: #3130F2! Penting;
  Font-Weight: 600;
  Radius sempadan: 37px;
  Sempadan-Bottom-Left-Radius: 0%;
  Sempadan-Bottom-Right-Radius: 0%;
  Sempadan-Bottom: 3PX Solid #FECD00;
}

.btn: hover {
  Border-color: telus! Penting;
}

 var prevScrollPos = window.pageyOffset;

window.onscroll = function () {
  var currentscrollpos = window.pageyOffset;
  jika (prevScrollpos> currentscrollpos) {
    document.getElementById ("NavBarsection"). Style.top = "0";
  } else {
    document.getElementById ("NavBarsection"). Style.top = "-70px";
  }
  prevScrollPos = currentscrollpos;
};

$ (dokumen) .ready (fungsi () {
  $ (dokumen) .on ("tatal", onscroll);

  // smoothscroll
  $ (". navbar-toggler"). pada ("klik", fungsi (e) {
    E.PreventDefault ();
    $ (dokumen) .off ("tatal");

    $ (".
      $ (ini) .removeClass ("aktif");
    });
    $ (ini) .addclass ("aktif");

    var sasaran = $ (ini) .paren ("div.container-fluid"). Cari (". navbar-brand"). attr ("href")
    menu = sasaran;
    $ sasaran = $ (sasaran);
    $ ("html, badan")
      .Stop ()
      .animate ({
          ScrollTop: $ sasaran.offset (). Top 2,
        },
        500,
        "Swing",
        fungsi () {
          window.location.hash = target;
          $ (dokumen) .on ("tatal", onscroll);
        }
      );
  });
});

fungsi onScroll (event) {
  var scrollpos = $ (dokumen) .scrollTop ();
  $ ("#navBarsection a"). Setiap (fungsi () {
    var currlink = $ (ini);
    var refelement = $ (currlink.attr ("href"));
    jika (
      refelement.position (). atas  ScrollPos
    ) {
      $ ("#navBarsection ul li a"). penyingkiran ("aktif");
      currlink.addclass ("aktif");
    } else {
      currlink.removeclass ("aktif");
    }
  });
}

Meringkaskan:

Melalui langkah -langkah di atas, anda dapat menyedari bahawa bar navigasi secara automatik menunjukkan dan menyembunyikan apabila menatal, dan pautan navigasi diaktifkan secara dinamik berdasarkan kedudukan viewport semasa dan klik peristiwa. Tutorial ini menyediakan pelaksanaan asas yang anda boleh mengubah suai dan melanjutkan mengikut keperluan anda sendiri. Sebagai contoh, anda boleh menambah lebih banyak pautan dan bahagian navigasi, atau mengubah suai kesan animasi dan gaya. Ingat, memahami logik di sebalik kod adalah kunci supaya anda dapat memohon dan menyesuaikan teknik -teknik ini dengan lebih baik.

Atas ialah kandungan terperinci Tutorial untuk melaksanakan bar navigasi yang menunjukkan/menyembunyikan dan mengaktifkan pautan navigasi semasa menatal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!