菜单图标更改颜色取决于HTML类/属性

Question

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

我已经通过使用数据颜色属性做了一个开始，但我有一个问题想出如何删除并添加类到＃打开按钮。我可以添加课程，但删除了正在努力的正确课程。

Here is my fiddle。

而且我的代码：

<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()的函数来使用正则表达式。

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

您可以添加

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 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添加到菜单中。

希望这会帮助你。与mix-blend-mode: exclusion

Answer 4

纯CSS解决方案：

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