从下面的代码片段中可以看出，当您滚动页面时，文本会在固定的div下传递。如何使这个固定div后面的文本不可见？当不在固定div下时，它仍然需要可见。
页面内容的背景颜色发生变化，因此我无法将固定div的颜色设置为背景颜色。
编辑：对不起，我应该更好地解释一下。叠加div不会是绿色的，我希望它与下面内容的背景颜色相匹配，这样它就会在文本通过叠加div时消失。我无法将其设置为下方内容的背景颜色，因为整个页面中内容的背景颜色会发生变化。
library(lubridate);
df <- data.frame("Date" = c(as_date(0:9)), ID = rep(paste0("ID", 1:3), each = 10))
df <- df[-c(5, 13, 24),]
date_before <- "1970-01-07"
div.pagecontent1 {
height:300px ;
background-color: white;
color: black;
}
div.pagecontent2 {
height:300px ;
background-color: black;
color: white;
}
div.overlay {
position:fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 500;
height: 100px;
background-color: green;
opacity: 0.5;
}
答案 0 :(得分：1)
这是一个使用线性渐变和一些JS来调整位置的想法：
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--y', (-scroll)+"px");
}body {
margin:0;
}
.pagecontent {
background:linear-gradient(to bottom,black 50%,white 0)0 0/100% 640px;
color: black;
}
.pagecontent p {
height:300px ;
padding:10px;
margin:0;
}
.pagecontent p:nth-child(2n+1) {
color:white;
}
.overlay {
position:fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 500;
height: 100px;
/*Use the same gradient*/
background:linear-gradient(to bottom,black 50%,white 0)0 0/100% 640px;
/*Use fixed to have the same reference*/
background-attachment:fixed;
/*translate the Y position to create the scroll effect and follow the other gradient*/
background-position:0 calc(var(--y));
}<div class="pagecontent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
</div>
<div class="overlay"></div>