Paano lumikha: sticky/fixed navigation bar

Paano lumikha ng sticky navigation bar

Unang hakbang - Magdagdag ng HTML:

Lumikha ng navigation bar:

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

Ikalawa ng hakbang - Magdagdag ng CSS:

Iset ng estilo ng navigation bar:

/* Iset ng estilo ng navigation bar */
#navbar {
  overflow: hidden;
  background-color: #333;
{}
/* Link ng navigation bar */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
{}
/* Nilalaman ng pahina */
.content {
  padding: 16px;
{}
/* Kapag sumapit ka sa posisyon ng scroll, magdagdag ng klase na sticky sa navigation bar sa pamamagitan ng JS */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
{}
/* Magdagdag ng ilang taas ng panloob na pad sa nilalaman ng pahina, upang maiwasan ang mabilis na paggalaw (bilang naagaw ang navigation bar sa itaas ng pahina sa bagong posisyon na position:fixed at top:0) */
.sticky + .content {
  padding-top: 60px;
{}

Ikatlong hakbang - Magdagdag ng JavaScript:

// Kapag gumagalaw ang user ang pahina, pagsasagawa ang myFunction
window.onscroll = function() {myFunction()};
// Kumuha ng navigation bar
var navbar = document.getElementById("navbar");
// Kumuha ng posisyon ng offset ng navigation bar
var sticky = navbar.offsetTop;
// Kapag sumapit ka sa posisyon ng scroll ng navigation bar, magdagdag ka ng klase na sticky. Kapag kaalis ka sa posisyon ng scroll, alisin ang klase na "sticky".
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  {}
{}

亲自试一试