Ways to adjust text hue in areas with backgrounds of white or black

Question

Ways to adjust text hue in areas with backgrounds of white or black

Is it possible to dynamically change the color of a menu based on the background color? For example, if the menu is scrolling over a black background, the menu text should be white; and if the background is white, the menu text should be black.

HTML

<div class="fixed-side-navbar">
    <ul class="nav">
        <li><a href="#example-one"><span>Example One</span></a></li>
        <li><a href="#example-two"><span>Example Two</span></a></li>
        <li><a href="#example-three"><span>Example Three</span></a></li>
        <li><a href="#example-four"><span>Example Four</span></a></li>
        <li><a href="#example-five"><span>Example Five</span></a></li>
        <li><a href="#example-six"><span>Example Six</span></a></li>
    </ul>
</div>
<div id="example-one"></div>
<div id="example-two"></div>
<div id="example-three"></div>
<div id="example-four"></div>
<div id="example-five"></div>
<div id="example-six"></div>

CSS:

.example-one {
  background: black;
}
.example-two { 
  background: black;
}
.example-three { background: white }
.example-four { background: black }
.example-five { background: white; }
.example-six { background: black; }

javascript jquery html css

Answer 1

Answer №1

Learn how to implement Jquery with this practical example.

Utilize variables to save the scroll position, and the position of elements offset from the top where you want the color change, such as element1 and element2 in this instance.
Compare the scroll's top offset against the elements' top position while scrolling through the document using $(document).scroll(function()).
Apply the correct CSS color or styles to the elements based on the conditional statements.

$(document).ready(function() {
  var scroll_pos = 0;
  $(document).scroll(function() {
    scroll_pos = $(this).scrollTop();
    var element1 = $('#backgrund2').offset().top;
    var element2 = $('#backgrund3').offset().top;
    if (scroll_pos < element2 && scroll_pos > element1) {
      $(".fixed-side-navbar a").css('color', 'black');
    } else {
      $(".fixed-side-navbar a").css('color', 'white');
    }
  });
});

body {
  height: 2000px;
  width: 100%;
}

.fixed-side-navbar {
  position: fixed;
  top: 0;
  left: 0;
}

.fixed-side-navbar a {
  text-decoration: none;
  color: white;
}

#backgrund1,
#backgrund2,
#backgrund3 {
  width: 100%;
  background: black;
  height: 700px;
}

#backgrund2 {
  background: white;
}

#backgrund3 {
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fixed-side-navbar">
  <ul class="nav>
    <li><a href="#background1"><span>Intro</span></a></li>
    <li><a href="#background2"><span>MSQ</span></a></li>
    <li><a href="#background3"><span>ICM</span></a></li>
    <li><a href="#sec2"><span>Section two</span></a></li>
    <li><a href="#sec3"><span>Section three</span></a></li>
    <li><a href="#sec4"><span>Section four</span></a></li>
  </ul>
</div>
<div id="backgrund1"></div>
<div id="backgrund2"></div>
<div id="backgrund3"></div>

Updated:

$(document).ready(function() {
  var scroll_pos = 0;
  var $window  = 7*$(window).height()/10; //Since, top=70%
  $(document).scroll(function() {
    scroll_pos = $(this).scrollTop()+$window;
    var element1 = $('#example-one').offset().top;
    var element2 = $('#example-two').offset().top;
    var element3 = $('#example-three').offset().top;
    var element4 = $('#example-four').offset().top;
    var element5 = $('#example-five').offset().top;
    var element6 = $('#example-six').offset().top;


    if ((scroll_pos >= element3 && scroll_pos < element4) || (scroll_pos >= element5 && scroll_pos < element6)) {
      $(".fixed-side-navbar a").css('color', 'black');
    } else {
      $(".fixed-side-navbar a").css('color', 'white');
    }
  });
});

.fixed-side-navbar {
  position: fixed;
  top: 70%;
  left: 0;
}

.fixed-side-navbar a {
  text-decoration: none;
  color: white;
}

#example-one {
  background: black;
  height: 700px;
  width: 100%;
}

#example-two {
  background: black;
  height: 700px;
  width: 100%;
}

#example-three {
  background: white;
  height: 700px;
  width: 100%;
}

#example-four {
  background: black;
  height: 700px;
  width: 100%;
}

#example-five {
  background: white;
  height: 700px;
  width: 100%;
}

#example-six {
  background: black;
  height: 700px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="fixed-side-navbar">
  <ul class="nav">
    <li><a href="#example-one"><span>Example One</span></a></li>
    <li><a href="#example-two"><span>Example Two</span></a></li>
    <li><a href="#example-three"><span>Example Three</span></a></li>
    <li><a href="#example-four"><span>Example Four</span></a></li>
    <li><a href="#example-five"><span>Example Five</span></a></li>
    <li><a href="#example-six"><span>Example Six</span></a></li>
  </ul>
</div>
<div id="example-one"></div>
<div id="example-two"></div>
<div id="example-three"></div>
<div id="example-four"></div>
<div id="example-five"></div>
<div id="example-six"></div>

Answer 2

Learn how to implement Jquery with this practical example.

Utilize variables to save the scroll position, and the position of elements offset from the top where you want the color change, such as element1 and element2 in this instance.
Compare the scroll's top offset against the elements' top position while scrolling through the document using $(document).scroll(function()).
Apply the correct CSS color or styles to the elements based on the conditional statements.

$(document).ready(function() {
  var scroll_pos = 0;
  $(document).scroll(function() {
    scroll_pos = $(this).scrollTop();
    var element1 = $('#backgrund2').offset().top;
    var element2 = $('#backgrund3').offset().top;
    if (scroll_pos < element2 && scroll_pos > element1) {
      $(".fixed-side-navbar a").css('color', 'black');
    } else {
      $(".fixed-side-navbar a").css('color', 'white');
    }
  });
});

body {
  height: 2000px;
  width: 100%;
}

.fixed-side-navbar {
  position: fixed;
  top: 0;
  left: 0;
}

.fixed-side-navbar a {
  text-decoration: none;
  color: white;
}

#backgrund1,
#backgrund2,
#backgrund3 {
  width: 100%;
  background: black;
  height: 700px;
}

#backgrund2 {
  background: white;
}

#backgrund3 {
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fixed-side-navbar">
  <ul class="nav>
    <li><a href="#background1"><span>Intro</span></a></li>
    <li><a href="#background2"><span>MSQ</span></a></li>
    <li><a href="#background3"><span>ICM</span></a></li>
    <li><a href="#sec2"><span>Section two</span></a></li>
    <li><a href="#sec3"><span>Section three</span></a></li>
    <li><a href="#sec4"><span>Section four</span></a></li>
  </ul>
</div>
<div id="backgrund1"></div>
<div id="backgrund2"></div>
<div id="backgrund3"></div>

Updated:

$(document).ready(function() {
  var scroll_pos = 0;
  var $window  = 7*$(window).height()/10; //Since, top=70%
  $(document).scroll(function() {
    scroll_pos = $(this).scrollTop()+$window;
    var element1 = $('#example-one').offset().top;
    var element2 = $('#example-two').offset().top;
    var element3 = $('#example-three').offset().top;
    var element4 = $('#example-four').offset().top;
    var element5 = $('#example-five').offset().top;
    var element6 = $('#example-six').offset().top;


    if ((scroll_pos >= element3 && scroll_pos < element4) || (scroll_pos >= element5 && scroll_pos < element6)) {
      $(".fixed-side-navbar a").css('color', 'black');
    } else {
      $(".fixed-side-navbar a").css('color', 'white');
    }
  });
});

.fixed-side-navbar {
  position: fixed;
  top: 70%;
  left: 0;
}

.fixed-side-navbar a {
  text-decoration: none;
  color: white;
}

#example-one {
  background: black;
  height: 700px;
  width: 100%;
}

#example-two {
  background: black;
  height: 700px;
  width: 100%;
}

#example-three {
  background: white;
  height: 700px;
  width: 100%;
}

#example-four {
  background: black;
  height: 700px;
  width: 100%;
}

#example-five {
  background: white;
  height: 700px;
  width: 100%;
}

#example-six {
  background: black;
  height: 700px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="fixed-side-navbar">
  <ul class="nav">
    <li><a href="#example-one"><span>Example One</span></a></li>
    <li><a href="#example-two"><span>Example Two</span></a></li>
    <li><a href="#example-three"><span>Example Three</span></a></li>
    <li><a href="#example-four"><span>Example Four</span></a></li>
    <li><a href="#example-five"><span>Example Five</span></a></li>
    <li><a href="#example-six"><span>Example Six</span></a></li>
  </ul>
</div>
<div id="example-one"></div>
<div id="example-two"></div>
<div id="example-three"></div>
<div id="example-four"></div>
<div id="example-five"></div>
<div id="example-six"></div>

Answer 3

Answer №2

Include the following CSS in your HTML file:

.navbar li:hover {
  background-color: #ffffff;
}

.navbar li {
  background-color: #000000;
}

.navbar li > a {
  color: #ffffff;
}

.navbar li:hover > a {
  color: #000000;
}

Answer 4

Include the following CSS in your HTML file:

.navbar li:hover {
  background-color: #ffffff;
}

.navbar li {
  background-color: #000000;
}

.navbar li > a {
  color: #ffffff;
}

.navbar li:hover > a {
  color: #000000;
}

Ways to adjust text hue in areas with backgrounds of white or black

Answer №1

Answer №2

Similar questions

What are some ways to utilize symbol fonts such as marvosym within a web browser?

Tips for migrating an AngularJS application to Angular

Having trouble with a basic jQuery selector not functioning as expected

Utilizing optional parameters with React Router

Vertically Center Image in a Div

`Can controllers be included in route or template definitions?`

When using the each() function, the array shows a length of zero and does not

Additional padding was included for the jQuery logo

Warning: The function is missing a dependency in the React Hook useEffect

The List<type> parameter within an ASP MVC controller action is coming back as null instead of an empty list

Looking to disable the back button in the browser using next.js?

When transferring files to the src/pages directory in Next.js, the custom _app and _document components are not recognized

Ways to display a different div when clicking on a div?

What is the standard root directory in the "require" function's context?

Angular input range slider that automatically rounds decimal values from the data bindings

Issues arising when using December in a JavaScript function to determine weekends

How can we include identical item names within a single JavaScript object?

What could be the reason for Angular to merge the element at index 0 of an array into a subarray instead of doing

Leveraging the MEAN Stack to Build Modern Web Applications

Utilizing previous ajax call responses for jQuery event handling