I am using VS on a Mac. I've just started coding two days ago so I am a noob. I am trying to make a fixed header change colours on scroll although it is not working. I don't think it's a problem with my settings etc as when I ran it online the header didn't change from grey to black either.

function changeRectangle() {
  const header = document.getElementById('header');
  var scrollValue = window.scrollY;
  if (scrollValue < 150) {
    header.classList.remove('header.active');
  } else {
    header.classList.add('header.active');
  }
  window.addEventListener('scroll', changeRectangle);
}

* {
  margin: 0;
  padding: 0;
}

.header.active {
  background: rgb(0, 0, 0);
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.header {
  position: fixed;
  height: 100px;
  width: 100%;
  z-index: 4;
  top: 0px;
  left: 0px;
  padding: 0;
  transition: all 1s;
  right: 0px;
  background-color: gray;
}

.lowerbackground {
  height: 1000px;
  width: 100%;
  background: white;
  position: absolute;
  top: 5000px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <script type="text/javascript"></script>
</head>

<body>
  <div id="header" ></div>
</body>

<script src="index.js"></script>

<body>
  <div ></div>
</body>

</html>

CodePudding user response：

You have issues with your JavaScript code (you are using wrong syntax)

header.classList.remove('header.active');

Correct syntax is

header.classList.remove('active');

similarly with .add()

Here is your final JS code

function changeRectangle() {
  const header = document.getElementById('header');
  var scrollValue = window.scrollY;
  if (scrollValue < 150) {
    header.classList.remove('active');
  } else {
    header.classList.add('active');
  }
}

window.addEventListener('scroll', changeRectangle);

Hope this helps...

CodePudding user response：

There are some issues

addEventListener inside the event handler
Too many body tags
You change the header.active, you just need to change active
You can toggle the active using the test, that is more elegant

function changeRectangle() {
  const header = document.getElementById('header');
  var scrollValue = window.scrollY;
  header.textContent = scrollValue; // for visual testing
  header.classList.toggle('active',scrollValue >= 150);
}
window.addEventListener('scroll', changeRectangle);

* {
  margin: 0;
  padding: 0;
}

.header.active {
  background: #AA0000;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.header {
  position: fixed;
  height: 100px;
  width: 100%;
  z-index: 4;
  top: 0px;
  left: 0px;
  padding: 0;
  transition: all 1s;
  right: 0px;
  background-color: gray;
}

.lowerbackground {
  height: 1000px;
  width: 100%;
  background: white;
  position: absolute;
  top: 5000px;
}

<div id="header" >Header</div>
<div >Lower</div>

Suggested HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title is mandatory</title>
  <meta name="viewport" content="width=device-width, initial scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <script src="index.js"></script>
</head>
<body>
  <div id="header" ></div>
  <div ></div>
</body>
</html>

CodePudding user response：

Okay you have a couple of issues

1- first of all move window.addEventListener('scroll', changeRectangle); out of function changeRectangle declaration

2- second header.active is not a valid HTML class name when is added to the DOM by JS. just rename it to active and change it in JS and CSS files accordingly

3- lastly you have to set !important to background to give it high specificity to overwrite the background in .header class

4- HTML tips

html element is good to have lang attribute
there is to body element which is not good
head element must have title

final code

function changeRectangle() {
    const header = document.getElementById('header');
    var scrollValue = window.scrollY;
    if (scrollValue < 150) {
        header.classList.remove('active');
    } else {
        header.classList.add('active');
    }
}

window.addEventListener('scroll', changeRectangle);

* {
    margin: 0;
    padding: 0;
}

.active {
    background: rgb(0, 0, 0) !important;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.header {
    position: fixed;
    height: 100px;
    width: 100%;
    z-index: 4;
    top: 0px;
    left: 0px;
    padding: 0;
    transition: all 1s;
    right: 0px;
    background-color: gray;
}

.lowerbackground {
    height: 1000px;
    width: 100%;
    background: white;
    position: absolute;
    top: 5000px;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>home</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial scale=1.0" />
        <link rel="stylesheet" href="styles.css" />
        <script type="text/javascript"></script>
    </head>

    <body>
        <div id="header" ></div>
    <div ></div>
    </body>

    <script src="index.js"></script>

</html>