const targetNavbarDesktop = document.querySelector('.fixed-navbar-desktop');
const targetNavbarMobile = document.querySelector('.fixed-navbar-mobile');
const fixedNavbarDesktop = document.querySelector('.navbar');
const fixedNavbarMobile = document.querySelector('.navbar');
const obFixedNavbar = new IntersectionObserver(obCallback);
let previousY = 0;
let previousRatio = 0
function obCallback(payload) {
const currentY = payload[0].boundingClientRect.y;
const currentRatio = payload[0].intersectionRatio
const isIntersecting = payload[0].isIntersecting;
if (currentY < previousY && isIntersecting) {
document.querySelector('.header').style.marginBottom = fixedNavbarMobile.offsetHeight + 'px';
fixedNavbarMobile.classList.add('navbar_fixed');
if (currentRatio < previousRatio) {
fixedNavbarMobile.classList.add('scroll-up'); // Появится при скролле вверх
}
} else if(currentY > previousY && isIntersecting) {
if(currentRatio > previousRatio){
fixedNavbarMobile.classList.remove('scroll-up');
}
}
previousY = currentY
previousRatio = currentRatio
}
if (document.documentElement.clientWidth > 992) {
obFixedNavbar.observe(targetNavbarDesktop);
} else {
obFixedNavbar.observe(targetNavbarMobile);
}<div class="block">
<div class="box">
<div class='image'></div>
<div class="info">
<div class="fav-icon"></div>
</div>
</div>
<div class="box">
<div class='image'></div>
<div class="info">
<div class="fav-icon"></div>
</div>
</div>
<div class="box">
<div class='image'></div>
<div class="info">
<div class="fav-icon"></div>
</div>
</div>
</div>.block {
display: grid;
grid-auto-rows: 100px;
gap: 20px;
margin: 0 auto;
padding: 20px;
width: 500px;
border: 1px solid black;
height: 500px;
}
.box {
display: flex;
width: 100%;
border: 1px solid black;
margin: 0 auto;
background-color: lightblue;
}
.box:nth-child(odd) {
flex-direction: row-reverse;
}
.image {
width: 30%;
height: 100%;
background-color: lightgreen;
}
.image:nth-child(odd) {
right: 620px;
}
.info{
width: 100%;
height: 100%;
position: relative;
}
.fav-icon{
width: 20px;
height: 20px;
background-color: white;
position: absolute;
right: 0;
top: 0;
}