Sticky Navbar "jumps"
======================

I recently made a navbar that sticks on the top of the screen when scrolling (it starts at the middle when entering the webpage). I did this on a mac and everything works just fine. However, when entering the webpage on my windows desktop, the whole navbar either jumps, skipping some content, or glitches, making me unable to scroll further down.

1) Is it the difference between macOS/windows, or safari/chrome, that makes this happen?

2) How do I fix it?

```js
// When the user scrolls the page, execute myFunction 
window.onscroll = function() {stickyNavbar()};
// Get the header
var header = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. 
// Remove "sticky" when you leave the scroll position
function stickyNavbar() {
    if (window.pageYOffset > sticky ) {
        header.classList.add("sticky");
    } else {
        header.classList.remove("sticky");
    }
}
```

```css
.navbar{
    display: grid;
    grid-template-columns: repeat(3, auto);
    background-image: url(resources/navbar.png);
    width: 100%;
    background-size: contain;
}

.sticky{
    position: fixed;
    top: 0;
    width: 100%;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
}

section {
   height: 1000px;
   border: 1px solid red;
}
```

```html

<body>
    <img class="header-image" src="resources/header.PNG" alt="">
    <nav class="navbar" id="navbar">
        <div><a href="pages/gallery.html">Galleri</a></div>
        <div class="active"><a href="index.html"><img class="boat-logo" src="resources/logo.png" alt=""></a></div>
        <div><a href="pages/timeline.html">Historikk</a></div>
    </nav>

    <section class="content"></section>
</body>
```