Im making portfolio website, and I want my fixed texts change its color on some sections, how can I do that ?I can't post my code,because its too big and long, but if you will give example with codes will be really pleased,here is how it must look like (https://olaolu.dev),you see how button and name is changing color while scrollings want to do as well:)
P.s please do it with js,thanks!
I tried to find info but I haven't find anything:(
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/b/cs.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<section id="s1">
<div >
<div >
<h2>Faxraddin</h2>
<div >
<div id="nav-icon1" onclick="document.getElementById('nav-icon1').classList.toggle('open')">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div >
<div >
<div >
<a >My Work</a>
<a >My Shelf</a>
<a >My Resume</a>
</div>
<div >
<a >SAY HELLO</a>
<a >[email protected]</a>
<a >t/me.com</a>
</div>
</div>
</div>
</div>
<div >
<div >
<h1>Frontend</br> Developer.</h1>
<h3 >I like to craft solid and scalable frontend products with great user experiences.</h3>
</div>
<img src="/b/images/Screenshot 2022-11-04 at 19.35.20.png">
</div>
<div >
<div >
<span>Highly skilled at progressive
enhancement, design systems &
UI Engineering.
</span>
<span>Over a decade of experience
building products for clients
across several countries.
</span>
</div>
<div >
<ul>
<a href="#s1"><div ></div></a>
<a href="#s2"><div ></div></a>
<a href="#s3"><div ></div></a>
<a href="#s4"><div ></div></a>
<a href="#s5"><div ></div></a>
</ul>
</div>
</div>
</div>
</section>
<section id="s2">
<div >
<div id="i1">
<h1>Design</h1>
<p>
I'm probably not the typical designer positioned behind an Illustrator artboard adjusting pixels, but I design. Immersed in stylesheets tweaking font sizes and contemplating layouts is where you'll find me (~_^). I'm committed to creating fluent user experiences while staying fashionable.
</p>
</div>
<div id="i2">
<h1>Engineering</h1>
<p>
In building JavaScript applications, I'm equipped with just the right tools, and can absolutely function independently of them to deliver fast, resilient solutions optimized for scale — performance and scalabilty are priorities on my radar
</p>
</div>
</div>
</section>
<section id="s3">
<div >
<div >
<h2>Over the</br> past 3 years,</h2>
<p>I've built products for companies and businesses around the globe ranging from marketing websites to complex solutions and enterprise apps with focus on fast, elegant and accessible user experiences.</p>
<p>Currently, I work at Shopify as a Senior UX Developer and Accessibility advocate crafting thoughtful and inclusive experiences that adhere to web standards for over a million merchants across the world.</p>
<p>Before now, I was Principal Frontend Engineer at hellotax, where I worked on a suite of tools and services tailored at providing fast, automated VAT Registration / filings & Returns solutions for multi-channel sellers across Europe.</p>
<p>Prior to hellotax, I was Senior frontend engineering contractor with Pixel2HTML, building JavaScript applications and interfaces for orgs and individuals.</p>
<p>I once also led the frontend team at a Russian startup, Conectar through building multiple React applications into a single robust learning platform.</p>
</div>
<img src="/b/images/2634454 copy.pdf">
</div>
</section>
<section id="s4">
<div >
<div >
<div >
<h1>I buld & </br> deign stuff</h1>
<p>Open source
projects, web apps
and experimentals.
</p>
<button >see my work ---></button>
</div>
<div >
<h1>I write,</br>sometimes</h1>
<p>About design,
frontend dev,
learning and life.
</p>
<button >read my article ---></button>
</div>
</div>
</div>
</section>
<section id="s5" >
<div >
<div >
<h1>Send me a message!</h1>
<p>Got a question or proposal, or just want</br>
to say hello? Go ahead.</p>
</div>
<div >
<div >
<label>Your Name</label>
<input type="text" placeholder="Enter your name">
</div>
<div >
<label>Email Address</label>
<input type="text" placeholder="Enter your address">
</div>
</div>
<div >
<input type="text" placeholder="Hi,i think we have to work together">
<button >SHOOT ---></button>
</div>
</div>
</section>
<section id="s6">
<div >
<div >
<div id="ll">
<span>SAY HELLO</span>
<span>[email protected]</span>
<span>t.me/mrolaolu</span>
</div>
<div >
<span>My Work</span>
<span>My Shelf</span>
<span>My Resume</span>
</div>
</div>
<h2 >© Faxraddin Olawuyi 2022</h2>
</div>
</section>
<script src="/b/js.js"></script>
</body>
</html>
body {
margin: 0;
padding: 0;
scroll-snap-type: y mandatory;
}
html{
scroll-behavior: smooth;
}
.bar1, .bar2, .bar3 {
width: 2.5vw;
height: .35vw;
background-color: #333;
margin: 6px 0;
transition: 0.2s;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
section{
scroll-snap-align: start;
}
.section-top{
height: 47vw;
padding-bottom: 10vw;
}
.details{
background-color:#0b2361;
background-repeat: no-repeat;
background-size: 100vw 100%;
}
.top {
display: flex;
justify-content: space-between;
padding: 1vw;
padding-bottom: 6vw;
}
.top h2{
font-size: 2.2vw;
margin: 0;
margin-top: 30px;
margin-left: 60px;
color:#e9ecf4;
position: fixed;
z-index: 3;
}
.nav-btn {
background: none;
border: none;
font-size: 3vw;
cursor: pointer;
position: fixed;
right: 4.5vw;
top:4vw;
z-index: 3;
padding-bottom: 2vw;
}
#l1{
width: 3vw;
}
#l2{
width: 2vw;
}
.first-info{
display: flex;
justify-content: space-between;
width: 70vw;
margin-left: 10vw ;
padding-top: 30px;
}
.first-sec h1{
font-size: 4.4vw;
color: #f1554c;
}
.first-sec h3{
width: 35vw;
margin-top: -2vw;
font-size: 1.5vw;
color:#e9ecf4;
}
.my-img{
width: 24vw;
margin-top: 10px;
}
.a1{
display: flex;
justify-content: space-between;
width: 35vw;
margin-left: 10vw ;
padding-top: 30px;
color:#f1554c;
margin-top: 20px;
padding-bottom: 6.5vw;
font-size: 1.3vw;
}
.a1 span{
width: 45%;
font-size: 1vw;
}
.some-info {
display: flex;
justify-content: space-between;
width: 93vw;
}
.btn-container{
position: fixed;
z-index: 1;
right: 0;
padding-right: 5.5vw;
margin-top: -3vw;
}
.btn-container ul{
display: flex;
flex-direction: column;
align-items: center;
}
.btn{
margin:.7vw;
cursor: pointer;
z-index: 1;
width: .2vw;
height: .2vw;
background-color: black;
transform: rotate(45deg);
border-style:solid;
transition: 0.3s;
}
.what-do{
background-repeat: no-repeat;
background-size: 100vw 100%;
height: 840px;
background-color: #e9ecf4;
}
.my-info{
display: flex;
margin-left: 7vw ;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.what-doing{
width: 50%;
}
.what-doing h1{
font-size: 4vw;
color: #f1554c;
}
.what-doing p{
font-size: 1.2vw;
width: 30vw;
margin-top: -2vw;
color:#0b2361;
}
#i2{
margin-top: 17vw;
margin-left: 1vw;
}
.exp{
height: 840px;
background-color:#0b2361
}
.e1{
display: flex;
justify-content: space-between;
width: 85vw;
padding-top: 1vw;
margin-left: -8vw;
padding-bottom: 2vw;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.exp-info{
display: flex;
flex-direction: column;
margin-left: 10vw;
color: #e9ecf4;
}
.exp-info h2{
font-size: 4.5vw;
margin-bottom: 0;
}
.exp-info p{
width: 25vw;
font-size: 1.1vw;
}
.exp-img{
height: 40vw;
margin-top: 6vw;
}
.done{
height: 840px;
background-color:#e9ecf4;
}
.grid{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.what-done{
display: flex;
margin: auto;
width: 90vw;
height: 40vw;
background-color: whitesmoke;
}
.w1{
width: 50%;
text-align: left;
padding: 5vw;
}
.w2{
width: 50%;
text-align: left;
padding: 5vw;
border-left-style: solid;
border-width: thin;
}
.w1 h1{
font-size: 3.3vw;
color: #f1554c;
}
.w1 p{
font-size: 2vw;
color:#0b2361;
}
.w2 h1{
font-size: 3.3vw;
color: #f1554c;
}
.w2 p{
font-size: 2vw;
color: #0b2361;
}
.done-btn{
background: none;
cursor: pointer;
font-size: 1.3vw;
padding: 1.3vw 5vw 1.3vw 5vw;
margin-top: 3vw;
color: #f1554c;
}
.hide-it{
position: absolute;
transition: 0.2s;
background-color: white;
height: 0;
width: 25vw;
position: fixed;
right: 3vw;
top:3vw;
color: white;
}
.hide1{
display: flex;
flex-direction: column;
}
.p1{
display: flex;
flex-direction: column;
padding-top: 6vw;
padding-left: 2.7vw;
transition: 0.1s;
visibility: hidden;
transition: 0.1;
}
.hide1-btn{
border: none;
background: none;
font-size: 1.4vw;
text-align: left;
padding: 10px;
}
.p2{
display: flex;
flex-direction: column;
padding-top: 6vw;
padding-left: 2.7vw;
transition: 0.1s;
visibility: hidden;
transition: 0.9;
}
.hode-1{
font-size: 1.4vw;
text-align: left;
padding: 10px;
}
.hide-span{
font-size: 1.4vw;
text-align: left;
padding: 10px;
}
.active{
visibility: visible;
height: 34vw;
z-index: 2;
color: black;
}
.active2{
visibility: visible;
}
.btn.active1{
background-color: white;
width: .7vw;
height: .7vw;
transform: rotate(0deg);
border-radius: 4px;
}
#nav-icon1 {
width: 4vw;
height: 3vw;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon1 span {
display: block;
position: absolute;
height: 3px;
width: 3.5vw;
background: black;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon1 span:nth-child(1) {
top: 0px;
}
#nav-icon1 span:nth-child(2) {
top: 18px;
}
#nav-icon1 span:nth-child(3) {
top: 36px;
}
#nav-icon1.open span:nth-child(1) {
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon1.open span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.send-me{
height: 840px;
background-color: #e9ecf4;
display: flex;
justify-content: center;
align-items: center;
}
.send-top h1{
font-size: 3.3vw;
text-align: center;
color: #f1554c;
}
.send-top p{
font-size: 1.7vw;
color:#0b2361;
text-align: center;
margin-top: -2vw;
padding-bottom: 5vw;
}
.send-inputs{
display: flex;
justify-content: space-between;
width: 50vw;
}
.send-inputs input{
outline: none;
padding: 1vw 0vw 1vw 0vw;
width: 21vw;
height: 2vw;
font-size: 1.3vw;
border-bottom: 5px solid black;
border-width: thin;
background: none;
border-top: none;
border-left: none;
border-right: none;
}
.send-inputs label{
font-size: 1vw;
}
.l{
display: flex;
flex-direction: column;
}
.send-final{
padding-top: 4vw;
width: 50.5vw;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.send-final input{
background: none;
font-size: 1.3vw;
width: 100%;
outline: none;
padding: 1vw 0vw 1vw 0vw;
height: 2vw;
border-width: thin;
border-bottom: 5px solid black;
background: none;
border-width: thin;
border-top: none;
border-left: none;
border-right: none;
}
.shoot{
border-width: thin;
font-size: 1.3vw;
border-color: black;
margin-top: 4vw;
width: 20vw;
height: 4vw;
background: none;
cursor: pointer;
font-size: 1.3vw;
padding: 1.3vw 5vw 1.3vw 5vw;
}
.end-1{
background-color: #0b2361;
height: 830px;
display: flex;
justify-content: center;
align-items: center;
}
.end-container{
display: flex;
flex-direction: column;
width: 80vw;
}
.end-info{
border-width: thin;
border-bottom: 5px solid #e9ecf4;
background: none;
border-width: thin;
border-top: none;
border-left: none;
border-right: none;
display: flex;
}
.e2{
display: flex;
flex-direction: column;
font-size: 1.5vw;
color: #e9ecf4;
padding: 4vw 0vw 8vw 0vw;
}
.e2 span{
padding-top: 1.5vw;
}
#ll{
margin-top:-3vw;
padding-right: 19vw;
}
.end-link{
color: #e9ecf4;
padding-top: 3vw;
}
CodePudding user response：
I think what you need is an intersection observer. Intersection observers allow you to "observe" a target and react when it is visible.
I have create a small example to demonstrate this. We are observing the section two. When it is visible we change the color to purple. When it isn't visible we change it back to black.
const title = document.querySelector('.topbar__title');
const sectionOne = document.querySelector('.section--one');
const sectionTwo = document.querySelector('.section--two');
const observer = new IntersectionObserver((entry, observer) => {
entry[0].isIntersecting > 0 ?
title.style.color = sectionTwo.getAttribute('data-color') :
title.style.color = sectionOne.getAttribute('data-color')
});
observer.observe(sectionTwo);* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.topbar {
position: fixed;
top: 0;
left: 0;
padding: 1rem;
width: 100%;
background-color: white;
}
.section {
height: 150vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.section--one {
background-color: white;
}
.section--two {
background-color: rgb(255 0 0 / 5%);
}<div >
<h1 >Title</h1>
</div>
<section data-color="black">
<h2>Section One</h2>
</section>
<section data-color="purple">
<h2>Section Two</h2>
</section>Of course you could observe multiple sections, or change a class instead os setting the style with JS. This is just a simple example...
There is some good information about Intersection Observers on MDN
CodePudding user response：
Visit https://jsfiddle.net/walter_dev/rk270zfx/13/
<html>
<head>
<title>Change Background on scroll</title>
</head>
<body>
<h1>STAGE1</h1>
<div id="stage1">
<p>
Praesent consectetur auctor lectus, eget faucibus libero facilisis vel. Duis sit amet bibendum lectus. Curabitur dapibus, tortor eu cursus posuere, elit ex ullamcorper ante, non eleifend erat lectus eu metus. Vivamus faucibus ornare lorem aliquam tincidunt. Praesent tempus, erat at faucibus egestas, turpis lorem consequat nisi, viverra rhoncus dui sapien id lacus. Curabitur ac magna nec neque malesuada ornare commodo ac tellus. Curabitur fermentum ex lobortis nisi rutrum egestas.
</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<h1>STAGE2</h1>
<div id="stage2">
<p>
Proin sagittis tellus pulvinar enim fermentum euismod. Nullam imperdiet imperdiet nisl. Fusce quis libero nisl. Morbi ultricies, purus placerat fermentum imperdiet, ipsum odio consequat tellus, eu blandit sapien mi tristique urna. Sed eu sapien a nulla placerat porttitor. Proin porta dictum dui eget euismod. Donec lobortis volutpat arcu at consequat. Morbi sed orci sit amet augue aliquet tincidunt.
</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<h1>STAGE3</h1>
<div id="stage3">
<p>
In vestibulum neque quis nibh pharetra hendrerit vitae eget tortor. Pellentesque placerat elit tempus, semper magna quis, mattis est. Fusce suscipit faucibus lectus, in tristique lacus porta vitae. Mauris nunc magna, posuere eget ex ut, malesuada ullamcorper mauris. Suspendisse placerat arcu eget dui maximus facilisis. Fusce ut metus elementum, bibendum odio in, consequat lacus. Maecenas interdum diam non magna dapibus ornare. Proin ut bibendum nisl. Cras vehicula vulputate mi, a eleifend nisl maximus ac. Vivamus ultrices pretium velit. Integer sodales tellus ultricies laoreet condimentum. Nam facilisis metus eu volutpat convallis. Duis molestie ornare orci eu dictum. Donec egestas massa vitae ligula efficitur viverra.
</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<h1>STAGE4</h1>
<div id="stage4">
<p>
Nam tempor ut dolor volutpat vestibulum. Aenean eu nulla at nunc volutpat eleifend vel quis mi. Proin aliquam tempus risus, at varius urna pulvinar at. Etiam dapibus aliquet volutpat. In arcu odio, feugiat id fermentum ac, fermentum in eros. Maecenas consequat gravida erat. Mauris ultrices justo rhoncus augue tristique mattis. Suspendisse blandit lorem nec purus ullamcorper cursus. Etiam vitae enim interdum, egestas mi et, suscipit ligula. Nulla nec ex convallis, malesuada purus vitae, dictum magna. Nam efficitur magna vel erat interdum rutrum. Maecenas ligula massa, ultrices at augue et, bibendum molestie lectus. Vestibulum lacinia dignissim rutrum. Donec justo urna, aliquet sed posuere in, mattis vitae ex. Proin condimentum risus arcu, eget consequat sapien vulputate mollis. Sed molestie pellentesque molestie.
</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<h1>STAGE5</h1>
<div id="stage5">
<p>
Vivamus vel leo orci. Ut semper egestas dui, in consectetur massa facilisis nec. Aliquam vestibulum efficitur enim id suscipit. Nam blandit, nunc in pharetra gravida, leo ex consequat massa, a faucibus nulla augue sit amet magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum urna et consequat. Nam consectetur tempor quam sit amet blandit. Vestibulum sodales ultrices pharetra. Vivamus et pellentesque nunc. Aliquam vehicula hendrerit magna, a ultricies ligula semper vel. Morbi auctor ut mi quis viverra.
</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB VDvE9tvIXrMQaPlFFSUTR nldQm1LuPXQ="
crossorigin="anonymous"></script>
<script>
function changeBackground(color) {
document.body.style.background = color;
}
// changeBackground("#000");
var position1 = $("#stage1").offset();
var position2 = $("#stage2").offset();
var position3 = $("#stage3").offset();
var position4 = $("#stage4").offset();
var position5 = $("#stage5").offset();
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
// Do something
console.log(scroll);
if (scroll == 0) {
changeBackground("#FFF");
}
else if (scroll > position1['top'] && scroll <= position2['top']) {
changeBackground("red");
}
else if (scroll > position2['top'] && scroll <= position3['top']) {
changeBackground("blue");
}
else if (scroll > position3['top'] && scroll <= position4['top']) {
changeBackground("yellow");
}
else if (scroll > position4['top'] && scroll <= position5['top']) {
changeBackground("brown");
}
else if (scroll > position5['top']) {
changeBackground("green");
}
});
</script>
</body>