Transitioning from a see-through navigation bar to a vibrant colored menu as

Question

Transitioning from a see-through navigation bar to a vibrant colored menu as

I consider myself a novice when it comes to JavaScript. My goal is to create a Transparent Menu that smoothly transitions from transparent to white with a box shadow as I scroll down the page. However, the JavaScript code I have implemented does not seem to be working.

<script type="text/javascript">
var a=document.getElementById('play');
var x=window.pageYOffset;
var see =function () {
    if (x >30) {
        a.style.background=" white";
    }else{
        a.style.background="transparent";
    }
    window.addEventListener("onscroll",see);
}
</script>

<header>
        <div class="menu" id='a'>
            <ul>
                <li><b>About</b></li>
            </ul>
        </div>
    </header>

.menu {
  background: transparent;
  margin-left: 320px;
  text-align: center;
  width: 100%;
  padding: 20px;
  position: fixed;
  top: 0px;
  transition: .5s;
}

javascript html css scroll menu

Answer 1

Answer №1

Ensure that the x definition is placed within the see function
Remember to put
```
window.addEventListener("onscroll", see);
```
after (outside) the see function
Utilize the Event name "scroll"

var a = document.getElementById('play');

function see() {

  var x = window.pageYOffset; // This should be inside
  
  if (x > 30) {
    a.style.background = " white";
  } else {
    a.style.background = "transparent";
  }
}

window.addEventListener("scroll", see); // This should be outside

Additionally, keep styling within CSS files instead of scattered throughout your JS files.
Make use of Element.classList.toggle() to switch a pre-defined CSS class:

const EL_play = document.querySelector("#play");

function see() {
  var x = window.pageYOffset; // This should be inside
  EL_play.classList.toggle("is-active", x > 30);
}

window.addEventListener("scroll", see); // This should be outside

body {
  margin: 0;
}

#play {
  position: sticky;
  top: 0;
  width: 100%;
  transition: background-color 0.3s;
}

#play.is-active {
  background-color: gold;
}

<div id="play">PLAY</div>
<p style="height: 300vh;">Long element to force scrollbars...</p>

Answer 2

Ensure that the x definition is placed within the see function
Remember to put
```
window.addEventListener("onscroll", see);
```
after (outside) the see function
Utilize the Event name "scroll"

var a = document.getElementById('play');

function see() {

  var x = window.pageYOffset; // This should be inside
  
  if (x > 30) {
    a.style.background = " white";
  } else {
    a.style.background = "transparent";
  }
}

window.addEventListener("scroll", see); // This should be outside

Additionally, keep styling within CSS files instead of scattered throughout your JS files.
Make use of Element.classList.toggle() to switch a pre-defined CSS class:

const EL_play = document.querySelector("#play");

function see() {
  var x = window.pageYOffset; // This should be inside
  EL_play.classList.toggle("is-active", x > 30);
}

window.addEventListener("scroll", see); // This should be outside

body {
  margin: 0;
}

#play {
  position: sticky;
  top: 0;
  width: 100%;
  transition: background-color 0.3s;
}

#play.is-active {
  background-color: gold;
}

<div id="play">PLAY</div>
<p style="height: 300vh;">Long element to force scrollbars...</p>

Transitioning from a see-through navigation bar to a vibrant colored menu as

Answer №1

Similar questions

Using AngularJS Services to Share Objects Between Views and Controllers

Unintentional GET request triggered by Axios baseURL

The useNavigate() hook from react-router-dom is not properly setting the id in the URL path

Grails: Javascript function for updating the image source is unresponsive

Utilize JavaScript when sharing on social media to avoid the possibility of embedding the entire

What does the term "root element" refer to in the Material-UI documentation?

Is there a way to enable popovers globally and also utilize the container: 'body' option simultaneously?

Search timeout restriction

Add HTML content individually to each item in the array

Guide on centering an unfamiliar element in the viewport using HTML, CSS, and JavaScript

Is it possible to achieve the same functionality as :first-child by employing :nth-of-type without a selector?

Is it possible to access Firebase data in Vue.js, with or without Vuefire, using a router parameter before the DOM is rendered?

Guide to verifying a field's value in a database

Challenges encountered when attempting to access files from the filesystem on vercel

Is there a way to ensure seamless animation when dynamically adding components in react native?

Making a node.js API call using multipart/form-data

Browsing through the last items on a webpage

Tips for adding an image into a PDF document using the jsPDF library in HTML

Is there a way to modify the color scheme of my webpage while utilizing Bootstrap?

What could be causing the malfunction of removeEventListener in my Nuxt application?