Adjust the color of the text as it scrolls by

Question

Adjust the color of the text as it scrolls by

As I work on developing my website using the Neve Theme on WordPress, I have encountered an issue with customizing the header block. I am using a plugin to set a background color for the header after scrolling 100px down the page, but this makes the text hard to read.

Although the plugin allows changing the text color, Neve seems to override any attempts made by me or the plugin. Thus, I am seeking a way to change the text color through code once the user has scrolled 100px on the website. The classes related to the content are:

a.button.button-primary & .book-now-header * header.header

The "header.header" class applies to the entire header block and is used to modify the background color, while the other two classes are meant for changing the text color of the content.

I would greatly appreciate any assistance with this matter, as I am unsure about where to start troubleshooting.

javascript css wordpress

Answer 1

Answer №1

Below is a code snippet that detects the scroll position of an element. You can convert the position to hexadecimal and use it with a color code to change the text color accordingly.

let lastPostition = 0;
function myFunction() {
  const element = document.getElementById("myDIV");
  let x = element.scrollLeft;
  let y = element.scrollTop;
  document.getElementById ("demo").innerHTML = "Horizontally: " + x.toFixed() + "<br>Vertically: " + y.toFixed();
  console.log(lastPostition);
  if(y.toFixed() === lastPostition ){
        alert("the end of document");
  }
  lastPostition = y.toFixed()
}

<!DOCTYPE html>
<html>
<style>
#myDIV {
  height: 250px;
  width: 250px;
  overflow: auto;
}

#content {
  height: 800px;
  width: 2000px;
  background-color: coral;
}
</style>

<body>
<h1>The Element Object</h1>
<h2>The scrollTop and scrollLeft Properties</h2>

<p>Scroll the content below to display the number of pixels it is scrolled.</p>

<div id="myDIV" onscroll="myFunction()">
  <div id="content">Scroll me!</div>
</div>

<p id="demo"></p>
</body>
</html>

let lastPostition = 0;
function myFunction() {
  const element = document.getElementById("myDIV");
  let x = element.scrollLeft;
  let y = element.scrollTop;
  document.getElementById("demo").innerHTML = "Horizontally: " + x.toFixed() + "<br>Vertically: " + y.toFixed();
  if(y.toFixed() === lastPostition ){
        alert("the end of document");
  }
  lastPostition = y.toFixed()
}

Answer 2

Below is a code snippet that detects the scroll position of an element. You can convert the position to hexadecimal and use it with a color code to change the text color accordingly.

let lastPostition = 0;
function myFunction() {
  const element = document.getElementById("myDIV");
  let x = element.scrollLeft;
  let y = element.scrollTop;
  document.getElementById ("demo").innerHTML = "Horizontally: " + x.toFixed() + "<br>Vertically: " + y.toFixed();
  console.log(lastPostition);
  if(y.toFixed() === lastPostition ){
        alert("the end of document");
  }
  lastPostition = y.toFixed()
}

<!DOCTYPE html>
<html>
<style>
#myDIV {
  height: 250px;
  width: 250px;
  overflow: auto;
}

#content {
  height: 800px;
  width: 2000px;
  background-color: coral;
}
</style>

<body>
<h1>The Element Object</h1>
<h2>The scrollTop and scrollLeft Properties</h2>

<p>Scroll the content below to display the number of pixels it is scrolled.</p>

<div id="myDIV" onscroll="myFunction()">
  <div id="content">Scroll me!</div>
</div>

<p id="demo"></p>
</body>
</html>

let lastPostition = 0;
function myFunction() {
  const element = document.getElementById("myDIV");
  let x = element.scrollLeft;
  let y = element.scrollTop;
  document.getElementById("demo").innerHTML = "Horizontally: " + x.toFixed() + "<br>Vertically: " + y.toFixed();
  if(y.toFixed() === lastPostition ){
        alert("the end of document");
  }
  lastPostition = y.toFixed()
}

Adjust the color of the text as it scrolls by

Answer №1

Similar questions

Clicking on the anchor at the bottom of the page will smoothly navigate you to the top of the page

Utilize the power of jQuery to easily toggle visibility of an overlay

How to use getBoundingClientRect in React Odometer with React Visibility Sensor?

What is the best way to exclude React.js source files from a fresh Nest.js setup?

Emphasize the most recent file during the document upload process and ensure the scroll bar moves accordingly to the document

Vuetify's v-badge showcasing an exceptionally large number in style

Modifying the .textcontent attribute to showcase an image using JavaScript

Aligning a block heading in the middle of the page

Leveraging jQuery for vertical alignment of an image

What is the best way to temporarily bold a cell item within a table row for a specified duration of time?

Replacing an existing pie chart with a new one using JavaScript

Updating your Heroku app (Node.js) from a GitHub repository - a step-by-step guide

Obtaining values from keys in React list items

Jquery Menu featuring subitems aligned to the right

Reconfigure a portion of a string using Vue's dynamic replacement feature

State is not currently utilizing the variable

Is there a way to make the React component automatically refresh upon clicking the search button?

You cannot reassign NodeJS global variables

Why is MutationRecord[] organized as an array in MutationObserver?

What strategies can be implemented to effectively share code between these two methods?