Hoe maak je: kleefende/fijne navigatiebalk

Hoe een hechtere navigatiebalk te maken

Eerste stap - Voeg HTML toe:

Maak de navigatiebalk aan:

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

Tweede stap - Voeg CSS toe:

Stel de stijl van de navigatiebalk in:

/* Stel de stijl van de navigatiebalk in */
#navbar {
  overflow: hidden;
  background-color: #333;
{}
/* Links in de navigatiebalk */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
{}
/* Inhoud van de pagina */
.content {
  padding: 16px;
{}
/* Voeg de klasse "sticky" toe aan de navigatiebalk wanneer deze aan de scrollpositie komt via JS */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
{}
/* Voeg wat bovenste inbuitschuiving toe aan de inhoud van de pagina om plotselinge snelle bewegingen te voorkomen (because de navigatiebalk krijgt een nieuwe positie aan de top van de pagina (position:fixed en top:0) */
.sticky + .content {
  padding-top: 60px;
{}

Derde stap - Voeg JavaScript toe:

// Voer myFunction uit wanneer de gebruiker door de pagina scrolt
window.onscroll = function() {myFunction()};
// Haal de navigatiebalk op
var navbar = document.getElementById("navbar");
// Haal de offsetpositie van de navigatiebalk op
var sticky = navbar.offsetTop;
// Wanneer u aan de scrollpositie van de navigatiebalk komt, voeg de klasse "sticky" toe. Verwijder de klasse "sticky" wanneer u de scrollpositie verlaat.
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  {}
{}

Try it yourself