Change the color of the menu icon based on the specified HTML class or attribute

Question

Change the color of the menu icon based on the specified HTML class or attribute

I'm trying to create a fixed menu that changes color depending on the background of different sections.

Currently, I am using a data-color attribute but I am struggling with removing and adding the class to #open-button. Adding the class works fine, but removing the correct one is proving to be difficult for me.

If you want to take a look at my code, check out my fiddle.

Here's a snippet of my code:

<div id="top-wrapper">
<div class="menu-button" id="open-button"><span></span></div>
</div>

<section class="section black-bg" data-color="icon-white">
  Section One has a black background
</section>
<section class="section white-bg" data-color="icon-black">
  Section Two has a white background
</section>
<section class="section black-bg" data-color="icon-white">
  Section Three has a black background
</section>
<section class="section white-bg" data-color="icon-black">
  Section Four has a white background
</section>

jQuery snippet:

$(function(){
$(window).on('scroll', function() {
        var scrollTop = $(this).scrollTop();
        $('.section').each(function() {
            var topDistance = $(this).offset().top;
            if ( (topDistance) < scrollTop ) {
                $('#open-button').addClass($(this).attr('data-color'));
            }
        });
    });
})

javascript jquery html css

Answer 1

Answer №1

You can utilize the removeClass() function along with a regex pattern.

The regex pattern in this case will target classes that start with icon-

$(function() {
  $(window).on('scroll', function() {
    var scrollTop = $(this).scrollTop();
    $('.section').each(function() {
      var topDistance = $(this).offset().top;
      if ((topDistance) < scrollTop) {
        //Apply removeClass and addClass
        $("#open-button").removeClass(function(index, className) {
          return (className.match(/(^|\s)icon-\S+/g) || []).join(' ');
        });
        $('#open-button').addClass($(this).attr('data-color'));
      }
    });
  });
})

.section {
  height: 500px;
  width: 100%;
}

.black-bg {
  background: #000000;
  color: #ffffff;
}

.white-bg {
  background: #ffffff;
  color: #000000;
}

#top-wrapper {
  position: fixed;
  z-index: 1005;
  width: 125px;
  top: 40px;
  left: 47px;
}

#open-button {
  z-index: 10005;
  display: block;
  width: 30px;
  height: 40px;
  margin: 20px 0 0 20px;
  float: right;
  position: relative;
  background: #fff;
}

#open-button.icon-black {
  background: #000;
}

#open-button.icon-white {
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-wrapper">
  <div class="menu-button" id="open-button"><span></span></div>
</div>

<section class="section black-bg" data-color="icon-white">
  Section One is black
</section>
<section class="section white-bg" data-color="icon-black">
  Section Two is white
</section>
<section class="section black-bg" data-color="icon-white">
  Section Three is black
</section>
<section class="section white-bg" data-color="icon-black">
  Section Four is White
</section>

Answer 2

You can utilize the removeClass() function along with a regex pattern.

The regex pattern in this case will target classes that start with icon-

$(function() {
  $(window).on('scroll', function() {
    var scrollTop = $(this).scrollTop();
    $('.section').each(function() {
      var topDistance = $(this).offset().top;
      if ((topDistance) < scrollTop) {
        //Apply removeClass and addClass
        $("#open-button").removeClass(function(index, className) {
          return (className.match(/(^|\s)icon-\S+/g) || []).join(' ');
        });
        $('#open-button').addClass($(this).attr('data-color'));
      }
    });
  });
})

.section {
  height: 500px;
  width: 100%;
}

.black-bg {
  background: #000000;
  color: #ffffff;
}

.white-bg {
  background: #ffffff;
  color: #000000;
}

#top-wrapper {
  position: fixed;
  z-index: 1005;
  width: 125px;
  top: 40px;
  left: 47px;
}

#open-button {
  z-index: 10005;
  display: block;
  width: 30px;
  height: 40px;
  margin: 20px 0 0 20px;
  float: right;
  position: relative;
  background: #fff;
}

#open-button.icon-black {
  background: #000;
}

#open-button.icon-white {
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-wrapper">
  <div class="menu-button" id="open-button"><span></span></div>
</div>

<section class="section black-bg" data-color="icon-white">
  Section One is black
</section>
<section class="section white-bg" data-color="icon-black">
  Section Two is white
</section>
<section class="section black-bg" data-color="icon-white">
  Section Three is black
</section>
<section class="section white-bg" data-color="icon-black">
  Section Four is White
</section>

Answer 3

Answer №2

You have the ability to include

removeClass()

$(function() {
  $(window).on('scroll', function() {
    var scrollTop = $(this).scrollTop();
    $('.section').each(function() {
      var topDistance = $(this).offset().top;
      if ((topDistance) < scrollTop) {
        $('#open-button').removeClass().addClass($(this).attr('data-color'));
      }
    });
  });
})

.section {
  height: 500px;
  width: 100%;
}

.black-bg {
  background: #000000;
  color: #ffffff;
}

.white-bg {
  background: #ffffff;
  color: #000000;
}

#top-wrapper {
  position: fixed;
  z-index: 1005;
  width: 125px;
  top: 40px;
  left: 47px;
}

#open-button {
  z-index: 10005;
  display: block;
  width: 30px;
  height: 40px;
  margin: 20px 0 0 20px;
  float: right;
  position: relative;
  background: #fff;
}

#open-button.icon-black {
  background: #000;
}

#open-button.icon-white {
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-wrapper">
  <div class="menu-button" id="open-button"><span></span></div>
</div>

<section class="section black-bg" data-color="icon-white">
  Section One is black
</section>
<section class="section white-bg" data-color="icon-black">
  Section Two is white
</section>
<section class="section black-bg" data-color="icon-white">
  Section Three is black
</section>
<section class="section white-bg" data-color="icon-black">
  Section Four is White
</section>

Answer 4

You have the ability to include

removeClass()

$(function() {
  $(window).on('scroll', function() {
    var scrollTop = $(this).scrollTop();
    $('.section').each(function() {
      var topDistance = $(this).offset().top;
      if ((topDistance) < scrollTop) {
        $('#open-button').removeClass().addClass($(this).attr('data-color'));
      }
    });
  });
})

.section {
  height: 500px;
  width: 100%;
}

.black-bg {
  background: #000000;
  color: #ffffff;
}

.white-bg {
  background: #ffffff;
  color: #000000;
}

#top-wrapper {
  position: fixed;
  z-index: 1005;
  width: 125px;
  top: 40px;
  left: 47px;
}

#open-button {
  z-index: 10005;
  display: block;
  width: 30px;
  height: 40px;
  margin: 20px 0 0 20px;
  float: right;
  position: relative;
  background: #fff;
}

#open-button.icon-black {
  background: #000;
}

#open-button.icon-white {
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-wrapper">
  <div class="menu-button" id="open-button"><span></span></div>
</div>

<section class="section black-bg" data-color="icon-white">
  Section One is black
</section>
<section class="section white-bg" data-color="icon-black">
  Section Two is white
</section>
<section class="section black-bg" data-color="icon-white">
  Section Three is black
</section>
<section class="section white-bg" data-color="icon-black">
  Section Four is White
</section>

Answer 5

Answer №3

Check out the solution provided here: https://jsfiddle.net/p1dfrzfg/4/

$(function(){
   var prevClass = "";
   $(window).on('scroll', function() {
      var scrollTop = $(this).scrollTop();
      $('.section').each(function() {
         var topDistance = $(this).offset().top;
         if ( (topDistance) < scrollTop ) {
            $('#open-button').removeClass(prevClass).addClass($(this).attr('data-color'));
            prevClass = $(this).attr('data-color');
         }
      });
   });
})

.section {
  height:500px;
  width:100%;
}

.black-bg {
  background:#000000;
  color:#ffffff;
}

.white-bg {
  background:#ffffff;
  color:#000000;
}

#top-wrapper {
    position:fixed;
    z-index: 1005;
    width:125px;
    top:40px;
    left:47px;
}
#open-button {
    z-index: 10005;
    display: block;
    width: 30px;
    height: 40px;
    margin: 20px 0 0 20px;
    float:right;
    position:relative;
    background:#fff;
}

#open-button.icon-black{
  background:#000;
}

#open-button.icon-white{
  background:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-wrapper">
<div class="menu-button" id="open-button"><span></span></div>
</div>

<section class="section black-bg" data-color="icon-white">
  Section One is black
</section>
<section class="section white-bg" data-color="icon-black">
  Section Two is white
</section>
<section class="section black-bg" data-color="icon-white">
  Section Three is black
</section>
<section class="section white-bg" data-color="icon-black">
  Section Four is White
</section>

Maintain the existing class and switch it upon scrolling down, updating the menu with a new class.

I trust this will be beneficial to you.

Answer 6

Check out the solution provided here: https://jsfiddle.net/p1dfrzfg/4/

$(function(){
   var prevClass = "";
   $(window).on('scroll', function() {
      var scrollTop = $(this).scrollTop();
      $('.section').each(function() {
         var topDistance = $(this).offset().top;
         if ( (topDistance) < scrollTop ) {
            $('#open-button').removeClass(prevClass).addClass($(this).attr('data-color'));
            prevClass = $(this).attr('data-color');
         }
      });
   });
})

.section {
  height:500px;
  width:100%;
}

.black-bg {
  background:#000000;
  color:#ffffff;
}

.white-bg {
  background:#ffffff;
  color:#000000;
}

#top-wrapper {
    position:fixed;
    z-index: 1005;
    width:125px;
    top:40px;
    left:47px;
}
#open-button {
    z-index: 10005;
    display: block;
    width: 30px;
    height: 40px;
    margin: 20px 0 0 20px;
    float:right;
    position:relative;
    background:#fff;
}

#open-button.icon-black{
  background:#000;
}

#open-button.icon-white{
  background:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-wrapper">
<div class="menu-button" id="open-button"><span></span></div>
</div>

<section class="section black-bg" data-color="icon-white">
  Section One is black
</section>
<section class="section white-bg" data-color="icon-black">
  Section Two is white
</section>
<section class="section black-bg" data-color="icon-white">
  Section Three is black
</section>
<section class="section white-bg" data-color="icon-black">
  Section Four is White
</section>

Maintain the existing class and switch it upon scrolling down, updating the menu with a new class.

I trust this will be beneficial to you.

Answer 7

Answer №4

Use this Pure CSS solution that utilizes the mix-blend-mode: exclusion property:

.section {
  height:500px;
  width:100%;
}

.black-bg {
  background:#000000;
  color:#ffffff;
}

.white-bg {
  background:#ffffff;
  color:#000000;
}

#top-wrapper {
  position:fixed;
  z-index: 1005;
  width:125px;
  top:40px;
  left:47px;
  mix-blend-mode: exclusion;
}
#open-button {
  z-index: 10005;
  display: block;
  width: 30px;
  height: 40px;
  margin: 20px 0 0 20px;
  float:right;
  position:relative;
  background:#fff;
}

#open-button.icon-black{
  background:#000;
}

#open-button.icon-white{
  background:#fff;
}

<div id="top-wrapper">
  <div class="menu-button" id="open-button"><span></span></div>
</div>

<section class="section black-bg" data-color="icon-white">
  Section One is black
</section>
<section class="section white-bg" data-color="icon-black">
  Section Two is white
</section>
<section class="section black-bg" data-color="icon-white">
  Section Three is black
</section>
<section class="section white-bg" data-color="icon-black">
  Section Four is White
</section>

Answer 8

Use this Pure CSS solution that utilizes the mix-blend-mode: exclusion property:

.section {
  height:500px;
  width:100%;
}

.black-bg {
  background:#000000;
  color:#ffffff;
}

.white-bg {
  background:#ffffff;
  color:#000000;
}

#top-wrapper {
  position:fixed;
  z-index: 1005;
  width:125px;
  top:40px;
  left:47px;
  mix-blend-mode: exclusion;
}
#open-button {
  z-index: 10005;
  display: block;
  width: 30px;
  height: 40px;
  margin: 20px 0 0 20px;
  float:right;
  position:relative;
  background:#fff;
}

#open-button.icon-black{
  background:#000;
}

#open-button.icon-white{
  background:#fff;
}

<div id="top-wrapper">
  <div class="menu-button" id="open-button"><span></span></div>
</div>

<section class="section black-bg" data-color="icon-white">
  Section One is black
</section>
<section class="section white-bg" data-color="icon-black">
  Section Two is white
</section>
<section class="section black-bg" data-color="icon-white">
  Section Three is black
</section>
<section class="section white-bg" data-color="icon-black">
  Section Four is White
</section>

Change the color of the menu icon based on the specified HTML class or attribute

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Strategies for preventing the appearance of empty rows associated with unused <tr> elements

Fade out the notification div using jQuery in MVC4

navigating up and down html elements using css selectors

Using jQuery: When the API has loaded successfully, execute the specified function

Pressing the escape key on the keyboard will act as a shortcut to go

Retrieve the element that is currently being hovered over within the same nested selector

Mistakenly appearing at the top of the window instead of the bottom of the window

Arranging hierarchical data in JavaScript

Retrieving the Href attribute from a designated div class with JQuery

Adjust the width of a div element to a specific size, center the div horizontally, and justify

The TypeError thrown by Mongo .updateMany() indicates that the property 'updateMany' of the object is not a valid function

Choosing a value in the second dropdown menu based on the selection made in the first dropdown menu can be achieved by retrieving both values from the database using a common list

Exploring JSON with JavaScript

Is there a way to customize the pagination dots in react-native-swiper-flatlist?

What is preventing HTML from triggering JavaScript when loaded inside a <div> with a script?

Central alignment of div with cursor

Creating a customized navigation bar with a unique menu list underline feature using JavaScript

Reducing an array group using index in JavaScript: A beginner's guide

Using threejs to pass multiple secondary geometries into vertex shaders

Strange CSS Problem: Button dysfunction in displays sized 13 inches or 15 inches