help :(

why do the sticky bar jump?

by KodiReporter

HTML

<!DOCTYPE html>
<html>

	<head> 
		 <meta charset="utf-8" />
		 <meta name= "author" content= "Lui"/>
		 <meta name="description" content="Abgabe Medieninformatik Louisa Glauche m27600"/>
		 <title> Abgabe Webseite </title>
		 <link rel="stylesheet" type="text/css" href="css/reset.css">
	     <link rel="stylesheet" type="text/css" href="css/style.css">
	</head>


		<div class="wrapper">
				<header>
					<div class="header">
						<!-- <img src="img/Universe.jpg"> -->
				<!--		<p> The navbar will stick to the top when you reach its scroll position. </p> -->
					</div> 
					<nav id="navbar">
						<a id="active" href="script/script.js">PlatzHalterLogo</a>
						<a href="script/script.js">Doctoren & Begleiter</a>
						<a href="script/script.js">Feinde & Schurken</a>
						<a href="script/script.js">Impressum</a>
					</nav>
				</header>
				<body>
				<main>
					<section>
					<p></br>
					<p></br>
					    <div class="content" >
							<h3>1Sticky Navigation Example</h3>
							<p>The navbar will stick to the top when you reach its scroll position.</p>
							<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
						</div>
						<div class="content" >
							<h3>2Sticky Navigation Example</h3>
							<p>The navbar will stick to the top when you reach its scroll position.</p>
							<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
						</div>
						<div class="content" >
							<h3>3Sticky Navigation Example</h3>
							<p>The navbar will stick to...

CSS

body {
	margin: 0 auto;
	margin-top: 0px;
	font-size: 28px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: black; 
	background-image: url("../img/Universe2.png"); 
	/* background-repeat: repeat; */ 

}

.content{
	width: 100%;
	height: 85%;
	background-color: #B6B9CC; 
	opacity: 0.5;	
	float: left;
	color: white;
	margin-top: 15px;
	margin-bottom: 15px;
	background-image: url('img/Universe.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center !important;
	position: relative;
	z-index: 0; }
}

/* Sticky Navbar */ 


.header {
	padding: 0px;
	text-align: center;
}	

#navbar {
	overflow: hidden; /* 0 < hidden         */
	background-color: #333;
	z-index: 100; 
	position: fixed;
}

#navbar a  {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px; 
	text-decoration: none;
	font-size: 23;
	min-width: auto; 
}

#navbar a:hover {
	background-color: #ddd;
	color: black;
}

#navbar a.active {
	background-color: #4CAF50;
	color: white;
}

.sticky {
	position: fixed;
	top: 0;
	width: 100%;
}

JavaScript

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
//var sidebar = document.getElementById("sidebar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
//	    sidebar.classList.add("stickySide")
  } else {
    navbar.classList.remove("sticky");
//	    sidebar.classList.remove("stickySide");
  }
}