JS file is not working?

[JonCai]

Hi Canvas community,

I am trying to make a customed navbar that sticks on the top of the window when the user is scrolling. I uploaded the CSS file and JS file via the Theme editor, the CSS works, but JS is not working. Any suggestions? 

My js file:

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

var contentnavbar = document.getElementById("content-navbar");
var sticky = content-navbar.offsetTop;

function myFunction() {
if (window.pageYOffset >= sticky) {
contentnavbar.classList.add("nav-sticky")
} else {
contentnavbar.classList.remove("nav-sticky");
}
}

My css file:

#content-navbar {
overflow: hidden;
background-color: black;

width: 100%;
text-align: center;
}

#content-navbar a {
display: inline-block;

color: #B3B6B7;
text-align: center;
padding: 7px 7px;
text-decoration: none;
font-size: 17px;
font-weight: bold;

}

#content-navbar a:hover {
color: white;
}

#content-navbar a.active {
color: white;
}

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

.nav-sticky + .content {
padding-top: 60px;
}

[Code-with-Ski · Accepted solution]

Is the element with an ID of "content-navbar" a custom element that you added in a different part of your JavaScript file?  If it is something from the native Canvas interface, can you give an example of where in Canvas you see this?

I did notice in the following line of code you included a hyphen, but the variable you declared on the line before it is contentnavbar.

var sticky = content-navbar.offsetTop;

I would also recommend using console log after you define the variable so you can test to see if it is successfully getting the element you expect.

console.log(contentnavbar);

[JonCai]

Thank you Code-with-Ski. The content-navbar is a custom element, and you are right, the hyphen was the issue. Thanks again for the help ❤️

[Code-with-Ski]

You're welcome 😀 I'm glad it was a quick fix