Menu Icon change colour depending on HTML class/attribute

Question

I have a fixed menu that needs to change colour depending on the background colour of different sections.

I've made a start by using a data-color attribute but I'm having an issue figuring out how to remove and add the class to #open-button. I'm able to add the class but removing the correct one I'm struggling with.

Here is my fiddle .

And 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 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>

jQuery:

$(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'));
            }
        });
    });
})

Answer 1

You can add

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 2

You can use removeClass() with a function to use a regex.

This regex will match icon-*

 $(function() { $(window).on('scroll', function() { var scrollTop = $(this).scrollTop(); $('.section').each(function() { var topDistance = $(this).offset().top; if ((topDistance) < scrollTop) { //Add this $("#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

Here you go with a solution hhttps://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> 

Preserve the previous added class & remove it when you scroll down & add new class to the menu.

Hope this will help you.

Answer 4

Pure CSS solution with mix-blend-mode: exclusion :

 .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>