我有一个在浅色和深色背景上滚动的固定菜单。
如果文本是白色的,那么在白色元素之上时它会变得不可见。我想找到一种方法,当我在页面上滚动时,文本的颜色会动态变化。
我的菜单:
<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/
有什么想法吗?
最佳答案
您可以使用 jQuery 根据 div 的高度添加/删除 css 类。
像这样:
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">
的高度 - 它将删除类。
关于javascript - 根据底层颜色更改固定文本的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39335960/