I have a landing page with sticky header.
When user start scroll and the page displays .second-section .header element should change the background-color property. How to do it right?
* {
box-sizing: border-box;
}
html,
body {
width: 100vw;
}
body {
margin: 0;
overflow-y: scroll;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
scroll-padding-top: var(--header-height);
}
:root {
--header-height: 100px;
}
.header {
position: sticky;
top: 0;
width: 100%;
height: var(--header-height);
border-bottom: 1px solid rebeccapurple;
background-color: burlywood;
}
.main {
}
.section {
display: flex;
height: calc(100vh - var(--header-height));
scroll-snap-align: start;
}
.section__item {
flex: 1 0 50%;
}
.first-section {
background-color: aquamarine;
}
.first-section-left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.first-section-left__text {
margin: 0 0 70px 0;
line-height: 1.5;
}
.first-section-left__button {
align-self: flex-start;
}
.second-section {
background-color: azure;
}
.galery {
display: grid;
grid-template-columns: repeat(3, minmax(200px, 1fr));
grid-auto-rows: minmax(80px, auto);
grid-auto-flow: dense;
}
.galery_item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.galery_item:nth-child(2) {
grid-row: 2;
}
.galery_item:nth-child(4) {
grid-column-end: span 3;
grid-row-end: 3;
}
.galery_item:nth-child(5) {
grid-column-end: span 3;
}
.galery_item:nth-child(7) {
grid-column-end: span 4;
}
.galery_item:nth-child(8) {
grid-column-end: span 3;
}
.galery_item:nth-child(10) {
grid-row: 3 / span 2;
}
.galery_item:nth-child(11) {
grid-row: 2;
}
.galery_item:nth-child(9) {
grid-row: 5;
grid-column: 5;
}
.galery_item:nth-child(12) {
grid-column-end: span 3;
}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci assumenda optio nesciunt deleniti voluptas. Amet ratione, necessitatibus deserunt natus ipsum ea magni debitis minima quod eum. Vel at praesentium magnam.
Run code snippetExpand snippet
Codepen
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)