I'm having trouble implementing a changing background color on scroll using JavaScript

Question

I'm having trouble implementing a changing background color on scroll using JavaScript

I've been attempting to change the background color of my navbar on scroll, but I keep encountering this error: 'Uncaught TypeError: Cannot read property 'add' of undefined'. Can someone please help me identify and fix the issue? Here is the CSS class that I'm trying to remove after it scrolls over the first page:

.navbar {
background: transparent !important;
z-index: 10;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
position: fixed;
width: 100%;
}

And here is the CSS class that I'm attempting to add after scrolling into the second page or beyond:

.navbar-active{
position: fixed;
background-color: rgba(0, 0, 0, .692) !important;
box-shadow: 0 3px 1rem rgba(0, 0, 0, .1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

Lastly, here is my JavaScript code to swap out the class lists:

const navbar = document.getElementsByClassName('navbar');

window.onscroll = function(){
const top = window.scrollY;
if(top >= 693){
    navbar.classList.add('.navbar-active');
} else {
    navbar.classList.remove('.navbar-active');
 }
}

javascript html css

Answer 1

Answer №1

Incorrectly accessing the navbar is a common mistake that can easily be avoided by following these steps:

Option One:

const navbar = document.getElementsByClassName('navbar')[0];

Remember that getElementsByClassName returns a list of elements with the specified class name

OR

Option Two:

const navbar = document.querySelector('.navbar');

Your second error lies here:

navbar.classList.add('.navbar-active')

, avoid including a period in your parameter string.

Simplify it like this:

navbar.classList.add('navbar-active')

Answer 2

Incorrectly accessing the navbar is a common mistake that can easily be avoided by following these steps:

Option One:

const navbar = document.getElementsByClassName('navbar')[0];

Remember that getElementsByClassName returns a list of elements with the specified class name

OR

Option Two:

const navbar = document.querySelector('.navbar');

Your second error lies here:

navbar.classList.add('.navbar-active')

, avoid including a period in your parameter string.

Simplify it like this:

navbar.classList.add('navbar-active')

Answer 3

Answer №2

The issue arises due to the fact that

document.getElementsByClassName('navbar')

returns an HTMLCollection object - which does not have a classList property. This makes sense when considering that multiple elements can share a class, making it illogical to refer to the list of classes for a group of elements instead of just one.

If you specifically want to add or remove a class from a single element, and assuming there is only one element with the class "navbar", you can achieve this in two ways:

const navbar = document.getElementsByClassName('navbar')[0];`

This retrieves the first (and likely only) element with the navbar class, or

const navbar = document.querySelector('.navbar');

which consistently selects the first element matching the given selector. Both methods provide an individual element with the expected classList property.

Another approach would be to use an ID instead of a class - especially if you know the identifier will be unique.

document.getElementById('navbarId')

works well in such cases, as there should only be one element in the document with a specific ID.

Additionally, as mentioned by @MosiaThabo in their response, there is an extra dot at the beginning of the class name you are attempting to add.

Answer 4

The issue arises due to the fact that

document.getElementsByClassName('navbar')

returns an HTMLCollection object - which does not have a classList property. This makes sense when considering that multiple elements can share a class, making it illogical to refer to the list of classes for a group of elements instead of just one.

If you specifically want to add or remove a class from a single element, and assuming there is only one element with the class "navbar", you can achieve this in two ways:

const navbar = document.getElementsByClassName('navbar')[0];`

This retrieves the first (and likely only) element with the navbar class, or

const navbar = document.querySelector('.navbar');

which consistently selects the first element matching the given selector. Both methods provide an individual element with the expected classList property.

Another approach would be to use an ID instead of a class - especially if you know the identifier will be unique.

document.getElementById('navbarId')

works well in such cases, as there should only be one element in the document with a specific ID.

Additionally, as mentioned by @MosiaThabo in their response, there is an extra dot at the beginning of the class name you are attempting to add.

Answer 5

Answer №3

When creating a classlist, remember to only include the classnames without using the dot (.) Your code should look like this:

navbar.classList.add('navbar-active');

However, it is highly recommended to use an ID as a selector instead of a class:

#navbar { 
background: transparent !important;
z-index: 10;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
position: fixed;
width: 100%;
}

By doing so, you can easily select it in JavaScript like this:

const navbar = document.getElementById('navbar');

This approach is more efficient for performance reasons.

Answer 6

When creating a classlist, remember to only include the classnames without using the dot (.) Your code should look like this:

navbar.classList.add('navbar-active');

However, it is highly recommended to use an ID as a selector instead of a class:

#navbar { 
background: transparent !important;
z-index: 10;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
position: fixed;
width: 100%;
}

By doing so, you can easily select it in JavaScript like this:

const navbar = document.getElementById('navbar');

This approach is more efficient for performance reasons.

I'm having trouble implementing a changing background color on scroll using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible that WebdriverIO is unable to retrieve the value for an input

A step-by-step guide on incorporating HTML into a div element with jQuery

Adapting CSS styles according to the height of the viewport

Building four frames with HTML

Error message: Attempting to access property 'create' of an undefined object results in error within react-dates

Trouble with punctuation marks causing difficulty in obtaining address information within an Ionic Angular app

What is causing my webpage to load items, flash, and then suddenly vanish?

Leveraging jQuery within Node.js

A delivery person is sending a JSON post request with an empty body to the Express server

Validating forms with dynamically populated fields using Jquery

The Ant Design form is not updating values after using setFieldsValue in Testing Library

What is the best method for sending data from the server to a client-side JavaScript file?

Is it possible for Ajax to actually make GET requests to the server, and if it does, why doesn't it appear in Firebug?

Upgrade ngf-select to work with Angular 8 versions

Error encountered when attempting to load image from URL in domain

Discrepancy in sorting order of key-value objects in JavaScript

What is the best way to combine HTML, JavaScript, and CSS in a PHP function file for optimal integration?

Problem encountered with PDFKit plugin regarding Arabic text rendering

Dealing with special characters in Mustache.js: handling the forward slash

Tips for preventing the occurrence of numerous instances of braintree.setup in Angular