Attempting to modify header color in various website sections without success

I've been struggling to figure out this code:

<script>
      window.onload = function() {myFunction()};
      window.onscroll = function() {myFunction()};
      function myFunction() {
      const top1 = document.getElementById("big-landing");
      let y1=top1.scrollTop;
      const top2 = document.getElementById("cbt-1");
      let y2=top2.scrollTop;
      const top3 = document.getElementById("cbt-2");
      let y3=top3.scrollTop;
      if ( document.documentElement.scrollTop >= y1 && document.documentElement.scrollTop < y2)) {
      document.getElementById("logo").src = "/assets/logo-no-type-inv.svg";
      $(".menu-circle").css("background-color", "black");
      $(".menu-overlay a").css("color", "white");
      if($(".dynamic-header-text").css("color") === "black")
      $(".dynamic-header-text").css("color", "white");
      else $(".dynamic-header-text").css("color", "black");
      } else if (document.documentElement.scrollTop >= y2 && document.documentElement.scrollTop < y3){
      document.getElementById("logo").src = "/assets/logo-no-type.svg";
      $(".menu-circle").css("background-color", "#ffaa00");
      $(".menu-overlay a").css("color", "black");
      if($(".dynamic-header-text").css("color") ===  "white")
      $(".dynamic-header-text").css("color", "black");
      else $(".dynamic-header-text").css("color", "white");
      } else if (document.documentElement.scrollTop >= y3) {
      document.getElementById("logo").src = "/assets/logo-no-type-inv.svg";
      $(".menu-circle").css("background-color", "black");
      $(".menu-overlay a").css("color", "white");
      if($(".dynamic-header-text").css("color") === "black")
      $(".dynamic-header-text").css("color", "white");
      else $(".dynamic-header-text").css("color", "black"); 
          
      }
    }
      </script>

Struggling with making the fixed header and full screen menu change color dynamically based on scroll position. It only works when comparing "document.documentElement.scrollTop" against a set value like 500px. Need help for responsive design.

htmljquerycssresponsive-design

Answer №1

ScrollTop provides information on the vertical scrolling position of an element:

Check out this link for more details.

If you're looking for an alternative approach, consider exploring:

Determining an element's position in relation to the document

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing the color of a div while implementing a show and hide effect in JavaScript

I have designed a checkout system with three distinct parts - shipping information, billing information, and order confirmation. These sections are all on the same page, allowing for a seamless flow during the checkout process. Once a customer completes t ...

javascriptjqueryhtmlcss

Dropdown menu similar to the one utilized in Bootstrap

I am curious to understand how the drop-down menu system in Bootstrap3's tutorial page operates. It seems that it collapses all subtopics under a main topic by default, allowing users to either click or scroll to expand further. Additionally, the menu ...

csstwitter-bootstrapdrop-down-menu

Ways to speed up the disappearance of error messages

There is a minor issue that I find quite annoying. The validation error message takes too long (approximately 3 seconds) to disappear after a valid input has been entered. Let me give you an example. Do you have any tips or tricks to resolve this problem? ...

javascripthtmlcssangularjserror-handling

Check if a radio button is selected using jQuery function and the same ID

I'm working with a form that includes radio buttons. <label class="radio inline" for="radios-BRE2b1"> <input type="radio" name="radios-BRE2b1" id="BRE2b1" value="oui" required="" class="requiredvqradio">Oui</label> <label cl ...

jqueryfunctionradio-buttonfindeach

The functionality of JQuery ceases to function properly once the BxSlider plugin is activated

I've encountered a strange issue while using the BxSlider plugin of jQuery on my page. When I implement the code for the slider with BxSlider, all other custom functions seem to stop working without any errors being displayed in the console. I've ...

javascriptjquerybxslider

Build a nested block containing a div, link, and image using jQuery or vanilla JavaScript

I have a button that, when clicked, generates a panel with 4 divs, multiple href links, and multiple images. I am new to web programming and understand that this functionality needs to be in the Javascript section, especially since it involves using jsPlum ...

javascriptjqueryhtmljsplumb

Transfer information from a server to a client using the fetch API in pure JavaScript

Hey there, I've been working on a mini app that sends a fetch request to the backend and expects some information in return when a button is clicked. However, I'm facing an issue where the fetch call seems successful with a 200 status, but the d ...

javascripthtmlnode.jsdatabase

Creating an Angular form from scratch using HTML

I've developed a component named login. Initially, I created an HTML form called login.component.html and then decided to convert it into an Angular form. To achieve this, I inserted <form #loginform="ngForm"> in the login.component.ht ...

htmlangulartypescript

Creating smooth transitions using JQuery's fade in and fade out effects

Within the webform, there are 3 divs and an img tag. Each time a div is clicked, the image within it should fade out, and a new picture should fade in. Here's an example: <script> $(document).ready(function () { $("#d2").click(func ...

jquery

Is it possible to adjust table rows to match the height of the tallest row in the table?

I've been attempting to ensure that all table rows have the same height as the tallest element, without using a fixed value. Setting the height to auto results in each row having different heights, and specifying a fixed value is not ideal because the ...

javascripthtmljquerycsshtml-table

Tips for organizing a Bootstrap 4 menu overflowing with elements

I'm struggling to figure out how to organize a Bootstrap 4 menu with numerous links. Currently, when I include too many links, the navbar disregards the container and expands its width beyond the container. Here is an image for better clarification: ...

cssnavbarbootstrap-4

The menu item fails to respond to clicks when hovering over the header background image

I'm having an issue with the Menu Link not working. I can click on the menu item when it's placed inside the body, but when I try to place it over the background header image, it stops working. Any help would be greatly appreciated. <div clas ...

javascripthtmlcss

"Troubles with directing on websites using jQuery, CSS,

I have been struggling with creating this navigation bar for weeks now and I keep running into issues. What I am attempting to achieve is a primary navigation bar that, when hovered over, displays a secondary navigation menu below and slightly to the righ ...

jqueryhtmlcssnavigation

What is the limit for table size in HTML5 Web SQL DB?

Currently, I am in the process of developing a rather intricate HTML5 web app that obtains its data from a Web Service to populate the Web SQL database. Initially, everything was running smoothly with test data. However, when I attempted to use actual dat ...

sqlsqlitehtmlgoogle-chromewebkit

Element that hovers and floats

Just last week, I was working on coding a custom menu bar for my blog located at . However, when it came to adding social buttons, things went awry. It seemed like a float element issue! Despite my attempts to resolve it by adjusting widths and properties, ...

htmlcss

To prevent the background image (blue border) from shifting, I need to extract the list item element without causing the image to

Having trouble with the side borders on my navbar. I've used a background image for the border (blue line) in the list item of the navbar. Is there a way to move down two specific list items slightly, like shown in my screenshot? I need to bring down ...

htmlcss

I'm having trouble adding a background image, even though I have set it to static. What could be

I attempted to add a background image to my Django website, but unfortunately, it was not successful. I followed the steps provided in this Stack Overflow answer here, however, it did not work. I even made changes to the database by migrating them, but s ...

javascriptpythonhtmlcssdjango

How can Swipe support help you slide a menu back in?

For implementing swipe support on my landing page carousel, I included jquery.mobile.custom.min.js. However, I am facing a challenge with adding swipe support to "close" the menu. Essentially, swiping left should have the same effect as clicking the butto ...

javascriptcsstwitter-bootstrapmenu

Concealing the path of a file input in CSS

Similar Question: How to Conceal Input File Path in HTML File Upload Hello there! I was wondering if it's feasible to conceal the input file path and only display the browse button? Thanks a lot! Lucas ...

cssinput-type-file

Python Selenium- Extract and print text from a dynamic list within a scrolling dropdown element

I am currently working on a project using Selenium and Python to extract a list of company names from a dropdown menu on a javascript-driven webpage. I have successfully managed to reveal the list of company names by clicking the navigation button, and eve ...

javascriptjquerypythoncssselenium