0

I`m trying to add an scroll event listener in JavaScript based on this: https://github.com/Godsont/Animated-Sticky-Header. But for some reason it isn´t working, when I scroll nothing happens. Can anyone help me pls? I´m new to JavaScript so I want to keep things as simple as possible.

I´m using Google Chrome btw.

I want to add an event on the id = "mainHeader" from Header. When the user scrolls down I want the background to change color, the logo img and the itens from the ul to get a little bit smaller. I also want the height from the header to get a little smaller. (the changes that I want are in the css and have ".is-crolling").

Thanks!

window.addEventListener("scroll", scrollHeader() );

function scrollHeader() {
  var mainHeader = document.getElementByID("mainHeader");
  if (window.pageYOffset > 0) {
    mainHeader.classList.add("is-scrolling");
  } else {
    mainHeader.classList.remove("is-scrolling");
  }
};
#mainHeader {
  background-color: white;
  position: fixed;
  width: 100%;
  height: 80px;
  z-index: 3;
  transition: background 0.4s;
}

#mainHeader.is-scrolling {
  background: #333;
}

#mainHeader.is-scrolling a {
  color: #eee;
  font-size: 13px;
}

#mainHeader.is-scrolling .header-logo img {
  width: 60px;
  height: 40px;
  border-radius: 5px;
}

.page-logo-nav {
  margin: 15px 115px 15px 115px;
}

.header-logo img {
  float: left;
  width: 70px;
  height: 50px;
  transition: height 0.4s;
}

.header-nav {
  float: right;
  height: 50px;
  display: flex;
  align-items: center;
}

.header-nav li {
  display: inline;
}

.header-nav .list-1:after {
  content: "★";
}

.header-nav a {
  color: black;
  padding: 20px;
  text-decoration: none;
  font-weight: 900;
  font-size: 15px;
  transition: font-size 0.4s;
}

.header-nav a:hover {
  color: #6ebbd3;
  border-top: 1px solid #266a7e;
  border-bottom: 1px solid #266a7e;
  transition: 0.3s;
}
<!DOCTYPE html>
<html>

<head>
  <title>Stuff</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton%7CMontserrat%7COpen+Sans%3A300%2C300i%2C400%2C400i%2C600%2C600i%2C700%2C700i%2C800%2C800i%7CPT+Sans%3A400%2C700&amp;ver=4.0.31" type="text/css" media="all">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <script src="JS/main.js"></script>
</head>

<body>
  <header id="mainHeader">
    <div class="page-logo-nav">
      <div class="header-logo">
        <a href="index.html">
          <img src="img/logo.jpg">
        </a>
      </div>
      <div class="header-nav">
        <nav>
          <ul>
            <li class="list-1"><a href="index.html">SOBRE</a></li>
            <li class="list-2"><a href="contactos.html">CONTACTOS</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
</body>

</html>
DGF
  • 330
  • 1
  • 4
  • 11
  • `scroll`events don't bubble. Not sure if that is your problem, just saying. – connexo Dec 22 '20 at 16:13
  • @connexo My problem is that when I scroll nothing happens. What you mean "scroll events don´t bubble"? I´m new to JS. – DGF Dec 22 '20 at 16:15
  • 3
    This code won't run as written. The event hander will execute immediately. You need to remove the `()` from `scrollHeader()` in `.addEventListener()` – Randy Casburn Dec 22 '20 at 16:18
  • Well observed. You only add the brackets when using inline event handlers ( `onscroll="scrollHeader()"` ) - which you shouldn't use. – connexo Dec 22 '20 at 16:20
  • You might find this helpful/instructive: https://stackoverflow.com/questions/123999/how-can-i-tell-if-a-dom-element-is-visible-in-the-current-viewport/55181673#55181673 – Randy Casburn Dec 22 '20 at 16:23
  • @RandyCasburn Thanks. I did what you said and removed the () but nothing happens. Do you have other suggestion pls? Like this right: window.addEventListener("scroll", scrollHeader ); – DGF Dec 22 '20 at 16:29
  • 1
    `getElementById()` !== `getElementByID()` - another typo. – Randy Casburn Dec 22 '20 at 16:32
  • @RandyCasburn Sorry, didn´t understand your last reply "getElementById() !== getElementByID()". I´m a noob... The code still isn´t working :/ – DGF Dec 22 '20 at 16:37
  • 1
    This is what I'm referring to: `var mainHeader = document.getElementByID("mainHeader");` - there is no such method on the `document` object. You have a typo: `ID` is **NOT** the same thing as `Id`. – Randy Casburn Dec 22 '20 at 16:39
  • @RandyCasburn Ohhh, didn´t notice the "ID" and "Id"... Thank you so much, it´s working now!! Do you have any references so I can understand better why it has to be without () ? – DGF Dec 22 '20 at 16:45
  • 1
    MDN is always the best/finest resource for everything JavaScript. Google "MDN addEventListener" (or MDN any JavaScript thing) and the first link will be the reference: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener – Randy Casburn Dec 22 '20 at 16:46
  • @RandyCasburn Thanks for the help! – DGF Dec 22 '20 at 17:21

0 Answers0