Sticking nav to top of webpage on scroll not working

I am trying to apply some script to a nav, I want the nav to stick to the top of the page when scrolled to. I know this can be done as I have done it before and it has worked. However this time it doesn't work.

I am using this code - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky

The website is here - http://www.mjlcarpentryltd.co.uk/

I don't know if the javascript is not just not working/kicking in or if there are other styles interfering somewhere. Any help would be greatly appreciated!

HTML

<div id="navbar">
<nav class="dropdownmenu">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">ABOUT US</a></li>
        <li>
            <a href="#">SERVICES</a>
                <ul id="submenu">
                    <li><a href="cutandpitchroofing.html">CUT AND PITCH ROOFING</a></li>
                    <li><a href="trussroofing.html">TRUSS ROOFING</a></li>
                    <li><a href="1stfixing.html">1ST FIXING</a></li>
                    <li><a href="2ndfixing.html">2ND FIXING</a></li>
                    <li><a href="cladding.html">CLADDING</a></li>
                    <li><a href="staircases.html">STAIRCASES</a></li>
                </ul>
        </li>
    <li><a href="projects.html">PROJECTS</a></li>
    <li><a href="testimonials.html">TESTIMONIALS</a></li>
    <li><a href="gallery.html">GALLERY</a></li>
    <li><a href="contact.html">CONTACT US</a></li>
</ul>

<script>
    window.onscroll = function() {myFunction()};

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

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

CSS

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

nav {
    display: block;
    background-color: #76afdb;
    width: 100%;
    z-index: 99999999;
    float: left;
    position: relative;
}

Solution

Have you tried using Foundation's sticky function? requires less JS. Or Bootstrap's position sticky value? these are both quick ways of doing what you want with your navigation bar. Both the links for further explanations are here: https://foundation.zurb.com/sites/docs/sticky.html https://getbootstrap.com/docs/4.0/utilities/position/

But, if you're using the CSS and JS from the link you provided:

CSS:

#navbar {
  overflow: hidden;
  background-color: #333;
}

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

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

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

.content {
  padding: 16px;
}

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

.sticky + .content {
  padding-top: 60px;
}

JS:

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

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

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

This should be working, have tested it myself. What other JS code are you using for your site? Can't see if its interfering with this JS code.