CODEWITHSUNDEEP
javascripthtml
user17088519
user17088519

Reputation:

My Javascript scroll function is not working?

const hamburger = document.querySelector(
  ".header .nav-bar .nav-list .hamburger"
);
const mobile_menu = document.querySelector(".header .nav-bar .nav-list ul");
const menu_item = document.querySelectorAll(
  ".header .nav-bar .nav-list ul li a"
);
const header = document.querySelector(".header .container");

document.addEventListener("scroll", () => {
    var scroll_position = window.scrollY;
    if (scroll_position > 250) {
        header.style.backgroundColor = "#29323c";
    } else {
        header.style.backgroundColor = "transparent";
    }
});

<section id="header">
    <div class="header container">
        <div class="nav-bar">
            <div class="brand">
                <a href="#hero">
                    <h1>ELITE.</h1>
                </a>
            </div>
            <div class="nav-list">
                <div class="hamburger"><div class="bar"></div></div>
                <ul>
                    <li><a href="#hero" data-after="Home">Home</a></li>
                    <li><a href="#services" data-after="Services">Services</a></li>
                    <li><a href="#projects" data-after="Projects">Projects</a></li>
                    <li><a href="#about" data-after="Our CEO">Our CEO</a></li>
                    <li><a href="#contact" data-after="Contact Us">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>
</section>

When I scroll past 250 the background color is not changing from transparent to the expected color in the JS code. How can I make MY JS respond on browser?

Upvotes: 1

Views: 228

Answers (1)

Posandu
Posandu

Reputation: 562

You used .header .container instead of #header .container

const hamburger = document.querySelector(
  ".header .nav-bar .nav-list .hamburger"
);
const mobile_menu = document.querySelector(".header .nav-bar .nav-list ul");
const menu_item = document.querySelectorAll(
  ".header .nav-bar .nav-list ul li a"
);
const header = document.querySelector("#header .container");

document.addEventListener("scroll", () => {
    var scroll_position = window.scrollY;
    if (scroll_position > 250) {
        header.style.backgroundColor = "#29323c";
    } else {
        header.style.backgroundColor = "transparent";
    }
});
#header {
 position:fixed;
}
<section id="header">
    <div class="header container">
        <div class="nav-bar">
            <div class="brand">
                <a href="#hero">
                    <h1>ELITE.</h1>
                </a>
            </div>
            <div class="nav-list">
                <div class="hamburger"><div class="bar"></div></div>
                <ul>
                    <li><a href="#hero" data-after="Home">Home</a></li>
                    <li><a href="#services" data-after="Services">Services</a></li>
                    <li><a href="#projects" data-after="Projects">Projects</a></li>
                    <li><a href="#about" data-after="Our CEO">Our CEO</a></li>
                    <li><a href="#contact" data-after="Contact Us">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>
</section>


<div style="height:500vh"></div>

Upvotes: 1

Related Questions