Navbar not being sticky-CodePudding

I accomplished having a sticky navbar with JavaScript and CSS, but all of a sudden it stopped working. I undid the code pretty far back but couldn't seem to get it to work again. Can anyone help me figure out what is wrong? Thank you!

// When the user scrolls the page, execute myFunction

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

// Get the navbar
var navbar = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
    if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
}

.spacer {
  width: 100%;
  height: 21px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
    
/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky   .content {
    padding-top: 102px;
}

.navbar {
    position: sticky;
}

.spacer{
  height:1000px;
}

<!-- Tab links -->
    <div id="navbar">
      <div  >
        <button  id="defaultOpen" onclick="openTab(event, 'Home')">Home</button>
        <button  onclick="openTab(event, 'Tasks')">Tasks</button>
        <button  onclick="openTab(event, 'Styles')">Styles</button>
      </div>
      <hr size="1" width="100%" color="#e5e5e5">  
    </div>
    
    <div >
      &nbsp;
    </div>

CodePudding user response：

So for me it still appears to work with the available code above: https://jsfiddle.net/ChaseJones/xpwdg4jn/3/

HTML:

<body style="height:2000px">

<div id="navbar">
  <div  >
    <button  id="defaultOpen" onclick="openTab(event, 'Home')">Home</button>
    <button  onclick="openTab(event, 'Tasks')">Tasks</button>
    <button  onclick="openTab(event, 'Styles')">Styles</button>
  </div>
  <hr size="1" width="100%" color="#e5e5e5">  
</div>

<div >
  &nbsp;
</div>
</body>

CSS:

.spacer {
  width: 100%;
  height: 21px;
  }

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

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky   .content {
    padding-top: 102px;
  }

.navbar {
 position: sticky;
}

JS:

// When the user scrolls the page, execute myFunction


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

  // Get the navbar
  var navbar = document.getElementById("navbar");

  // Get the offset position of the navbar
  var sticky = navbar.offsetTop   navbar.parentElement.style.paddingTop;

  // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
  function myFunction() {
    if (window.pageYOffset >= sticky) {
      navbar.classList.add("sticky")
    } else {
      navbar.classList.remove("sticky");
    }
  }

Did you recently move the JS to a separate file or is it included as a script in the html? If so the </script> will need to be removed.

CodePudding user response：

you could try changing .navbar to #navbar in your CSS file as it has the ID attribute and not a class attribute