0

I'm very new to writing code but I've seen this done the same way, I don't get why it does nothing. The issue is likely somewhere in the CSS part.

JavaScript

var navbar = document.getElementsByClassName("navbar");
       var lastY = window.pageYOffset;
       window.onscroll = function()
      {
       var currY = window.pageYOffset;
       if (lastY > currY)
       {
        document.getElementsByClassName("navbar").style.top = "0";
       }
       else
       {
        document.getElementsByClassName("navbar").style.top = "-50px";
       }
       lastY = currY;
      }

HTML- I'm not exactly sure why I have to put all the links in their separate navbar-items class divs, but if I don't do this they start overlapping the header (i want the navbar to have that name on the left and the links on the right) and also make the other contents of the page after the navbar vanish.

<div class="navbar">
        <h1>Квартална кръчма Тримата глупаци</h1>
        <div class="navbar-items">
          <div class="navbar-items"><a href="index.html">Home</a></div>
          <div class="navbar-items"><a style="color:red;" href="Menu.html">Menu</a></div>
          <div class="navbar-items"><a href="About_Us.html">About us</a></div>
          <div class="navbar-items"><a href="Contact_Us.html">Contact us</a></div>
        </div>
      </div>

CSS

.navbar {
    overflow: hidden;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:#505d61;
    z-index: 99;
    padding: 10px;
    height: 60px;
    top: 0;
    width: 100%;
    box-shadow: 0 0 10px black;
}

.navbar-items {
    overflow: hidden;
    float:left;
    display:block;
    margin-left: 40px;
    margin-right: 5px;
    gap: 80px;
    font-size: 21px;
    font-weight: 550;
}

.navbar a{
   color:black;
   text-decoration: none;
}

.navbar a:hover{ 
    color: white;
}
TCGbg
  • 1
  • 1
    https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return – CBroe May 25 '22 at 14:04

1 Answers1

0

As the comment from CBroe points to, you issue is that you are expecting an element back from document.getElementsByClassName("navbar") but you are actually getting back an array. To access the element you need to pull it out of the array, you can do this like document.getElementsByClassName("navbar")[0].

So updating your code to

var lastY = window.pageYOffset;
window.onscroll = function(){
    var currY = window.pageYOffset;
    if (lastY > currY){
        document.getElementsByClassName("navbar")[0].style.top = "0";
    }
    else{
        document.getElementsByClassName("navbar")[0].style.top = "-50px";
    }
    lastY = currY;
}

Should fix the issue.

Daniel Black
  • 550
  • 6
  • 13
  • Unfortunately, it still doesn't work. I also tried making navbar an id so I wouldn't need this anyways but it still didn't work. – TCGbg May 25 '22 at 14:34
  • @TCGbg do you have content below the navbar? If you don't it is possible the page can't actually scroll to trigger the onscroll event. Try adding a `console.log("Fired")` to the beginning of the onscroll function, and check the log when scrolling to see if the function is firing. – Daniel Black May 25 '22 at 14:47
  • @TCGbg I've added a fiddle [here](https://jsfiddle.net/phz0mx6a/) with your working code. You'll need to play around with the CSS to get it looking the way you want, but the JS is firing correctly and adding the style. – Daniel Black May 25 '22 at 15:13
  • I have a lot after the navbar so that isn't the problem, I copy-pasted your code and it still doesn't work. Thank you a lot for this, but I guess the issue is being caused by something else in the page. – TCGbg May 25 '22 at 17:56
  • @TCGbg you might be able to track down the issue by taking a look at the fiddle I linked in my previous comments. Sorry I couldn't help, if you do figure it out I'd love to hear the resolution! – Daniel Black May 25 '22 at 18:02