如何更改部分背景为白色或黑色的文本颜色

Question

如果菜单滚动超过背景，如何更改菜单颜色：黑色然后菜单文本应为白色或背景为白色则菜单文本应为黑色。

HTML

<div class="fixed-side-navbar">
    <ul class="nav">
        <li><a href="#example-one"><span>Example One</span></a></li>
        <li><a href="#example-two"><span>Example Two</span></a></li>
        <li><a href="#example-three"><span>Example Three</span></a></li>
        <li><a href="#example-four"><span>Example Four</span></a></li>
        <li><a href="#example-five"><span>Example Five</span></a></li>
        <li><a href="#example-six"><span>Example Six</span></a></li>
    </ul>
</div>
<div id="example-one"></div>
<div id="example-two"></div>
<div id="example-three"></div>
<div id="example-four"></div>
<div id="example-five"></div>
<div id="example-six"></div>

CSS：

.example-one {
  background: black;
}
.example-two { 
  background: black;
}
.example-three { background: white }
.example-four { background: black }
.example-five { background: white; }
.example-six { background: black; }

Answer 1

将此css添加到html：

.nav li:hover {
  background-color: #ffffff;
}

.nav li {
  background-color: #000000;
}

.nav li > a {
  color: #ffffff;
}

.nav li:hover > a {
  color: #000000;
}

Answer 2

这是使用Jquery的演示。

• 使用变量存储滚动位置，位置偏离顶部的元素，您希望颜色更改即本例中的element1和element2。
• 使用{{1}滚动文档时，检查 滚动顶部的偏移与元素顶部位置的偏移 }。
• 根据条件语句将适当的CSS颜色或样式应用于元素。

＆＃13;

＆＃13;

$(document).scroll(function())

＆＃13;

$(document).ready(function() {
  var scroll_pos = 0;
  $(document).scroll(function() {
    scroll_pos = $(this).scrollTop();
    var element1 = $('#backgrund2').offset().top;
    var element2 = $('#backgrund3').offset().top;
    if (scroll_pos < element2 && scroll_pos > element1) {
      $(".fixed-side-navbar a").css('color', 'black');
    } else {
      $(".fixed-side-navbar a").css('color', 'white');
    }
  });
});

＆＃13;

body {
  height: 2000px;
  width: 100%;
}

.fixed-side-navbar {
  position: fixed;
  top: 0;
  left: 0;
}

.fixed-side-navbar a {
  text-decoration: none;
  color: white;
}

#backgrund1,
#backgrund2,
#backgrund3 {
  width: 100%;
  background: black;
  height: 700px;
}

#backgrund2 {
  background: white;
}

#backgrund3 {
  background: black;
}

＆＃13;

＆＃13;

＆＃13;

<强>更新

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fixed-side-navbar">
  <ul class="nav">
    <li><a href="#background1"><span>Intro</span></a></li>
    <li><a href="#background2"><span>MSQ</span></a></li>
    <li><a href="#background3"><span>ICM</span></a></li>
    <li><a href="#sec2"><span>Section two</span></a></li>
    <li><a href="#sec3"><span>Section three</span></a></li>
    <li><a href="#sec4"><span>Section four</span></a></li>
  </ul>
</div>
<div id="backgrund1"></div>
<div id="backgrund2"></div>
<div id="backgrund3"></div>

＆＃13;

$(document).ready(function() {
  var scroll_pos = 0;
  var $window  = 7*$(window).height()/10; //Since, top=70%
  $(document).scroll(function() {
    scroll_pos = $(this).scrollTop()+$window;
    var element1 = $('#example-one').offset().top;
    var element2 = $('#example-two').offset().top;
    var element3 = $('#example-three').offset().top;
    var element4 = $('#example-four').offset().top;
    var element5 = $('#example-five').offset().top;
    var element6 = $('#example-six').offset().top;


    if ((scroll_pos >= element3 && scroll_pos < element4) || (scroll_pos >= element5 && scroll_pos < element6)) {
      $(".fixed-side-navbar a").css('color', 'black');
    } else {
      $(".fixed-side-navbar a").css('color', 'white');
    }
  });
});

＆＃13;

.fixed-side-navbar {
  position: fixed;
  top: 70%;
  left: 0;
}

.fixed-side-navbar a {
  text-decoration: none;
  color: white;
}

#example-one {
  background: black;
  height: 700px;
  width: 100%;
}

#example-two {
  background: black;
  height: 700px;
  width: 100%;
}

#example-three {
  background: white;
  height: 700px;
  width: 100%;
}

#example-four {
  background: black;
  height: 700px;
  width: 100%;
}

#example-five {
  background: white;
  height: 700px;
  width: 100%;
}

#example-six {
  background: black;
  height: 700px;
  width: 100%;
}

＆＃13;

＆＃13;

＆＃13;