☰ ☰

HTML/CSS/Javascript - Sticky navigatiebalk

Sticky navigatiebalk

In dit voorbeeld wordt een 'sticky' horizontale navigatiebalk getoond bovenaan de webpagina.
De standaard HTML code is aanwezig om een pagina te maken.
Met Javascript worden enkele functies gebruikt om een dropdown lijst te tonen (w3_accordeon functie) als de pagina op een klein scherm wordt weergegeven. De functie myFunction() maakt de navigatiebalk 'sticky'.
In het 'style' gedeelte wordt de opmaak van de navigatiebalk ingesteld.
De navigatiebalk krijgt een 'id' met de naam 'navbar'.
Onderaan de webpagina wordt de scrolling afgehandeld met een Javascript functie.
Nota: de link naar het 'w3.css' bestand moet uiteraard juist worden ingesteld!

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="w3.css">
<!-- can be placed into and linked to a *.js file -->
<script>
function w3_accordeon(elem) {
	var x = document.getElementById(elem);
	if (x.className.indexOf('w3-show') == -1) {
		x.className += ' w3-show';
	} else {
		x.className = x.className.replace(' w3-show', '');
	}
}
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>
<!-- can be placed into and linked to a *.css file -->
<style>
#navbar {
  background-color: #FFF;
  background: rgba(255, 255, 255, 0.1);
  z-index:1;
}
.content {
  padding: 0px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.sticky + .content {
  padding-top: 100px;
}
</style>
</head>
<body>
<div id="navbar">
	<div class="w3-container w3-padding w3-card-2 w3-border w3-round-xlarge w3-light-grey">
		<div class="w3-center">
		<div>
			<a href="#" 
				class="w3-left w3-btn w3-border w3-pale-blue w3-large w3-round-xlarge">
				Home
			</a>
			<!-- items -->
			<a href="#" 
				class="w3-btn w3-left w3-pale-yellow w3-border w3-large w3-round-xlarge w3-hide-medium w3-hide-small">
				&nbsp;Item 1&nbsp;
			</a>
			<a href="#" 
				class="w3-btn w3-left w3-pale-green w3-border w3-large w3-round-xlarge w3-hide-medium w3-hide-small">
				&nbsp;Item 2&nbsp;
			</a>
			<a href="#top" class="w3-left w3-btn w3-border w3-large w3-pale-red w3-round-xlarge">Top</a>&nbsp;
			<a href="javascript:void(0)" 
				class="w3-bar-item w3-large w3-button w3-border w3-right w3-pale-blue w3-hide-large w3-round-xlarge"
				onclick="w3_accordeon('demo')">&#9776;</a>
			<!-- smaller screen -->
			<div class="w3-container w3-margin-right w3-hide-large">
				<div id="demo" class="w3-bar-block w3-hide w3-hide-large">
					<!-- items -->
					<a href="#" 
						class="w3-bar-item w3-button w3-pale-yellow w3-border w3-round-xlarge w3-large">
						&nbsp;Item 1&nbsp;
					</a>
					<a href="#" 
						class="w3-bar-item w3-button w3-pale-green w3-border w3-round-xlarge w3-large">
						&nbsp;Item 2&nbsp;
					</a>
				</div>
			</div>
		</div>
		</div>
	</div>
</div>
<!-- content of the page comes here -->
<!-- page filler -->
<div class="w3-center">
1<br><br><br>2<br><br><br>3<br><br><br>4<br><br><br>5<br><br><br>6<br><br><br>7<br><br><br>8<br><br><br>9
<br><br><br>10<br><br><br>11<br><br><br>12<br><br><br>13<br><br><br>14<br><br><br>15<br><br><br>16<br><br><br>17
<br><br><br>18<br><br><br>19<br><br><br>20
</div>

<!-- this script needs to be in this file for the scrolling -->
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop+100;
</script>
</body>
</html>

Bladzijden

Paragrafen