Question

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

我已经开始使用数据颜色属性，但我遇到了解决如何删除类并将其添加到#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()

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用removeClass()函数来使用正则表达式。

此正则表达式将匹配icon-*

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

在这里，您可以使用解决方案hhttps：//jsfiddle.net/p1dfrzfg/4/

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

保留之前添加的class＆amp; 向下滚动＆amp;将新class添加到菜单中。

希望这会对你有所帮助。

Answer 4

使用mix-blend-mode: exclusion的纯CSS解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: