根据底层颜色更改固定文本的颜色 [英] Change colour of fixed text based on underlaying colours

问题描述

我有一个固定的菜单，可在浅色和深色背景上滚动.

I have a fixed menu that scrolls on top of both light and dark backgrounds.

如果文本为白色，则在白色元素上方时将不可见.我想找到一种方法，当我在页面上滚动时，文本的颜色会动态变化.

If the text is white it becomes invisible when on top of white elements. I would like to find a way where the color of the text changes dynamically as I scroll on the page.

我的菜单:

<div class="nav-wrapper footer-wrapper">
<nav>
    <div class="column">
    <a href="#" class="prev-section">Previous</a>
    </div>
    <div class="column links">
    <a href="#" class="next-section">Next</a>
    </div>
</nav>

有效的JSFiddle: https://jsfiddle.net/ua06Lbwk/5/

A working JSFiddle: https://jsfiddle.net/ua06Lbwk/5/

有什么想法吗?

推荐答案

您可以使用jQuery根据div的高度添加/删除css类.

You can use jQuery to add/remove a css class depending on the height of the divs.

赞:

HTML:

<nav>
    link
    </nav>

    <div id="element1">
    </div>

    <div id="element2">
    </div>

    <div id="element3">
    </div>

CSS:

.wrapper {
  height: 100px;
}

nav {
  position: fixed;
  width: 100%;
  color: white;
  text-align: center;
 }

#element1 {
  height: 50vh;
  background-color: gray;
}

#element2 {
  height: 20vh;
  background-color: white;
}

#element3 {
  height: 100vh;
  background-color: black;
}

.active {
  color:black;
}

jQuery:

$(document).ready(function() {
$(window).scroll(function() {
   var element1height = $( "#element1" ).height(); 
   var element2height = $( "#element2" ).height();
   var total = element1height + element2height;
   var st = $(this).scrollTop();
   if( st > element1height ) {
   $("nav").addClass("active"); 
   } 
   else {
   $("nav").removeClass("active"); 
   }
   if( st > total ) {
   $("nav").removeClass("active"); 
   } 
  }); 
 }); 

您可以使用jQuery来获取div的高度-如果用户滚动超过<div id="element1">的高度，它将为<nav>添加一个类，该类将更改其中的文本颜色.如果用户滚动超过<div id="element1">&的总和， <div id="element2">的高度-它将删除该类.

You can use jQuery to get the height of the divs - if the user scrolls past the height of <div id="element1">, it will add a class to <nav> which changes the color of the text within. If the user scrolls past the sum of <div id="element1"> & <div id="element2">'s height - it will remove the class.

JSFiddle演示

这篇关于根据底层颜色更改固定文本的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！