菜单图标根据HTML类/属性更改颜色

Question

我有一个固定的菜单，需要根据不同部分的背景颜色来更改颜色。

我已经开始使用data-color属性，但是在确定如何删除类并将其添加到＃open-button时遇到了问题。 我可以添加该类，但可以删除我正在努力学习的正确类。

这是我的小提琴 。

而我的代码：

<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

你可以加

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

您可以将removeClass()与函数一起使用以使用正则表达式。

此正则表达式将匹配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

在这里您可以找到解决方案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> 

保留以前添加class和向下滚动时和添加新的删除class菜单。

希望这会帮助你。

Answer 4

具有mix-blend-mode: exclusion纯CSS解决方案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>