JavaScript edit CSS style position value - position

Question

EDIT: Basically working code
My goal is to have my logo above the navigation bar of my website but when I scroll down the logo should disappear and the nav bar should stay fixed at the top.
Example Website which has this: w3schools
I implemented a go back up button according to the tutorial here in order to see if js works and it does.
Here is my code: jsfiddle. I have modified the js from the go back up example but it doesn't work.
In this code snippet I get an error that I don't know but the same js works in the "go back up button" example.
var amountScrolled = 100;
var navbar = document.getElementById('navbar-eff');
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
navbar.style.position = "fixed";
} else {
navbar.style.position = "relative";
}
});
ul.navbar {
position: relative
z-index:99999;
top:0;
width: 100%;
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #333;
font-size: 100%;
padding: 0 0 0 0;
}
ul.navbar li {
float:left;
padding-left: 0.5em;
padding-right: 0.5em;
}
ul.navbar li a {
display: block;
color: white;
text-align: center;
padding: 0.25em 0.25em;
text-decoration: none;
border-bottom: none;
padding-left: 0;
}
<div id="wrapper">
<div id="logo">
<h1>
my logo
</h1>
</div>
<ul class="navbar" id="navbar-eff" style="">
<li> Home</li>
<li> Hello World</li>
<li> About Me</li>
</ul>
</div>
<header>
<p> Lorem <br>ipsum <br>dolor<br> sit<br> amet<br>, consectetur<br> adipiscing<br> elit,<br> sed<br> do<br> eiusmod <br>tempor<br> incididunt<br> ut<br> labore<br> et<br> dolore<br> magna<br> aliqua<br>. Ut<br> enim<br> ad<br> minim<br> veniam,<br> quis <br>nostrud<br> exercitation<br> ullamco<br> laboris<br> nisi<br> ut<br> aliquip<br> ex<br> ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</header>