How to fix other divs affecting by fixed position - html

Question

As in the snippet, I'm implementing intersection observer to change the background image when the specific section comes in middle of the .main section.
The problem is the .main section is affecting all the divs of the page because its .BG inside main has fixed position.
Is there a way to fix this or i can stop the the user on main section till last child than i scroll to footer ?
const bgEl = document.querySelector(".BG");
const bgE2 = document.querySelector(".section");
function createObserver(el) {
let observer;
let options = {
root: null,
rootMargin: "0px",
};
function handleIntersect(entries, observer) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const url = entry.target.getAttribute("BGurl");
bgEl.style.backgroundImage = `url(${url})`;
entry.target.classList.add("visible");
} else {
entry.target.classList.remove("visible");
}
});
}
observer = new IntersectionObserver(handleIntersect, options);
observer.observe(el);
return observer;
}
(function () {
const sections = document.querySelectorAll(".main .section");
const observers = Array.from(sections).map(function (section) {
createObserver(section);
});
})();
* {
margin: 0px;
padding: 0px;
}
.section {
height: 100vh;
width: 100%;
display: flex;
z-index: 1;
position: relative;
background-size: 100% 100% !important;
opacity: 0.4;
}
.visible {
opacity: 1;
transition: all 1s ease-in-out;
}
.text {
margin: auto;
}
.text p {
font-family: "Lato";
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 149%;
color: #263244;
}
.text h1 {
margin-bottom: 20px;
font-family: "Lato";
font-style: normal;
font-weight: 700;
font-size: 50px;
line-height: 0px;
color: #ffffff;
margin-bottom: 50px;
}
.text .story-detail {
width: 300px;
border-radius: 20px;
background: radial-gradient(
76.31% 191.89% at 13.43% 22.19%,
rgba(226, 228, 231, 0.8) 0%,
rgba(228, 228, 229, 0.368) 100%
);
backdrop-filter: blur(10px);
padding: 23px;
}
.text .story-description {
width: 321px;
border-radius: 20px;
background: radial-gradient(
76.31% 191.89% at 13.43% 22.19%,
rgba(226, 228, 231, 0.8) 0%,
rgba(228, 228, 229, 0.368) 100%
);
backdrop-filter: blur(10px);
padding: 23px;
}
.BG {
position: fixed;
height: 100%;
width: 100%;
z-index: 0;
opacity: 1;
top: 0px;
background-size: cover;
background-repeat: no-repeat;
opacity: 1;
}
.main {
width: 100%;
height: 100vh;
}
<div style="height: 700px; width: 100%">
Header
</div>
<div style="height: 700px; width: 100%">
Intro
</div>
<div class="main">
<div class="BG"></div>
<div
class="section"
BGurl="https://i.postimg.cc/9QYL3ytR/mobile-camp.png"
>
<div class="text">
<div style="margin-inline: 20px">
<h1>Our Story</h1>
<div class="story-detail">
<p>
We saw a gap between what people need and what banks offer. It
means millions of us aren't getting the banking experience we
deserve for different reasons.
</p>
</div>
</div>
</div>
</div>
<div
class="section"
BGurl="https://i.postimg.cc/9QYL3ytR/mobile-camp.png"
>
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
Traditional banks don’t focus on customers' experience, their
systems may be slow and outdated, they may prioritize a specific
group of people, or perhaps they lack the ability to innovate,
and so on.
</p>
</div>
</div>
</div>
</div>
<div
class="section"
BGurl="https://i.postimg.cc/9QYL3ytR/mobile-camp.png"
>
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
Traditional banks don’t focus on customers' experience, their
systems may be slow and outdated, they may prioritize a specific
group of people, or perhaps they lack the ability to innovate,
and so on.
</p>
</div>
</div>
</div>
</div>
<div
class="section"
BGurl="https://i.postimg.cc/cLPLS8xW/mobile-desert.png"
>
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
So since we're passionate about solving problems and bridging
gaps, we looked into and identified the challenges and
capabilities we'll need to build a bank here in the Kingdom.
</p>
</div>
</div>
</div>
</div>
<div
class="section"
BGurl="https://i.postimg.cc/mZnqV38T/mobile-birds.png"
>
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
With the best local and international expertise, we began
building an innovative digital bank designed by and for the
people. We believe that the most effective way to build a bank
for people is to do it with them. This is our philosophy. So, we
started building it with the help of people like you.
</p>
</div>
</div>
</div>
</div>
<div class="section" BGurl="https://i.postimg.cc/k513m0Fb/mountain.png">
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
At D360, innovation starts with someone’s passion for improving
financial services. To that person, we say: Never stop offering
solutions to your needs. These solutions will not only benefit
you, but will significantly impact the lives of millions.
</p>
</div>
</div>
</div>
</div>
</div>
<div style="height: 700px; width: 100%">
Links here
</div>
<div style="height: 100vh; width: 100%">
Footer here
</div>