html 粘性，平滑，主动导航

Posted 2021-05-10

html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  display: grid;
  grid-template-columns: min-content 1fr;
  font-family: system-ui, sans-serif;
  overflow-x: hidden;
}
header {
  grid-column: 1 / 3;
  background: #455A64;
  color: white;
  padding: 4rem;
  text-align: center;
}
nav {
  white-space: nowrap;
  background: #37474F;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Only stick if you can fit */
@media (min-height: 300px) {
  nav ul {
    position: sticky;
    top: 0;
  }
}
nav ul li a {
  display: block;
  padding: 0.5rem 1rem;
  color: white;
  text-decoration: none;
}
nav ul li a.current {
  background: black;
}
main {
  padding-bottom: 40rem;
}
section {
  padding: 2rem;
  margin: 0 0 2rem 0;
}
footer {
  grid-column: 1 / 3;
  background: #607D8B;
  padding: 5rem 1rem;
}

Sticky, Smooth, Active Nav
--------------------------


A [Pen](https://codepen.io/harunpehlivan/pen/YjQXPw) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).

[License](https://codepen.io/harunpehlivan/pen/YjQXPw/license).

let mainNavLinks = document.querySelectorAll("nav ul li a");
let mainSections = document.querySelectorAll("main section");

let lastId;
let cur = [];

// This should probably be throttled.
// Especially because it triggers during smooth scrolling.
// https://lodash.com/docs/4.17.10#throttle
// You could do like...
// window.addEventListener("scroll", () => {
//    _.throttle(doThatStuff, 100);
// });
// Only not doing it here to keep this Pen dependency-free.

window.addEventListener("scroll", event => {
  let fromTop = window.scrollY;

  mainNavLinks.forEach(link => {
    let section = document.querySelector(link.hash);

    if (
      section.offsetTop <= fromTop &&
      section.offsetTop + section.offsetHeight > fromTop
    ) {
      link.classList.add("current");
    } else {
      link.classList.remove("current");
    }
  });
});

<header>
  <h1> HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP </h1>
</header>

<nav>
  <ul>
    <li><a href="#section-1">HOME</a></li>
    <li><a href="#section-2">ABOUT</a></li>
    <li><a href="#section-3">DIALOG</a></li>
    <li><a href="#section-4">NEWS</a></li>
    <li><a href="#section-5">ARTİCLES</a></li>
    <li><a href="#section-6">ACTİVİTİES </a></li>
    <li><a href="#section-7">TEAM</a></li>
    <li><a href="#section-8">PERSONEL</a></li>
    <li><a href="#section-9">CEO WHERE</a></li>
  </ul>
</nav>

<main>
  <section id="section-1">
    <h1>HOME</h1>
    <p><a href="https://shortcutz.link/harunpehlivan" rel="noopener noreferrer" target="_blank"><strong>INFORMATION TECHNOLOGY FOUNDER,CEO BLOGGER</strong></a></p>
  </section>
  <section id="section-2">
    <h1>ABOUT</h1>
    <p><a href="https://wiseintro.co/harunpehlivan" rel="noopener noreferrer" target="_blank"><strong>PERSONELL PAGES</strong></a></p>
  </section>
  <section id="section-3">
    <h1>DIALOG</h1>
    <p><iframe src="https://www.google.com/maps/embed?pb=!4v1532459762602!6m8!1m7!1s_35aUW3xmI21YrK9ORdzbA!2m2!1d40.82946776090784!2d35.65740059309628!3f57.57!4f-0.39000000000000057!5f1.3946584482860698" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
      <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d4960.797732928768!2d35.657568!3d40.829449!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x11196fc28c1118f0!2zVEVSQ1VNQU4gQsSwTMSwxZ7EsE0gTUVSS0VaxLAgVEVSQ1VNQU4gRcSexLBUxLBNIELEsEzEsE0gVEVLTsSwSyBBUkHFnlRJUk1BIEdFTMSwxZ5UxLBSTUUgTUVSS0VaxLA!5e1!3m2!1str!2sus!4v1532459874194" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

    </p>
  </section>
  <section id="section-4">
    <h1>NEWS</h1>
    <p><strong><a href="http://harunpehlivantebimtebitagem.site123.me" rel="noopener noreferrer" target="_blank">HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</a></strong></p>
  </section>
  <section id="section-5">
    <h1>ARTİCLES</h1>
    <p><a href="http://harunpehlivantebimtebitagem.site123.me" rel="noopener noreferrer" target="_blank">HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</a></p>
  </section>
  <section id="section-6">
    <h1>ACTİVİTİES</h1>
    <p><strong><a href="http://harunpehlivantebimtebitagem.site123.me" rel="noopener noreferrer" target="_blank">HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</a></strong></p>
  </section>
  <section id="section-7">
    <h1>TEAM</h1>
    <p><a href="http://harunpehlivantebimtebitagem.site123.me" rel="noopener noreferrer" target="_blank">HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</a></p>
  </section>
  <section id="section-8">
    <h1>PERSONEL </h1>
    <p><a href="http://harunpehlivantebimtebitagem.site123.me" rel="noopener noreferrer" target="_blank">HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</a></p>
  </section>
  <section id="section-9">
    <h1>CEO WHERE</h1>
    <p><a href="http://harunpehlivan.portalfin.com/" rel="noopener noreferrer" target="_blank">HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</a></p>
  </section>
</main>

<footer>
  &copy;2018 HARUN PEHLİVAN
</footer>