Как правильно рассчитать скролл?
к элементу с учетом того, что есть стики блок и header fixed
(function() {
let media = matchMedia('(max-width: 1967px)'),
matches = media.matches;
let navigation = $('.header');
listener();
$(window).resize(listener);
media.addListener((e) => {
matches = e.matches
listener()
})
$(window).scroll(listener);
function listener() {
var heightHeader
var scrollTop = $(window).scrollTop();
if (matches) {
heightHeader = $(".header__wrap").outerHeight(true);
if (heightHeader <= scrollTop) {
$('.header').addClass('header--fixed');
navigation.css({
'top': -heightHeader + 'px'
});
} else {
$('.header').removeClass('header--fixed');
navigation.css({
'top': -scrollTop
});
}
} else {
navigation.css({
'top': ''
});
}
}
})()
$(document).on('click', '.card__box', function() {
let target = $(this).attr('href');
coordsScroll = $(target).offset().top - $(".header__wrap").outerHeight(true) - $(".sticky").outerHeight(true);
//console.log( $(target).offset().top) - $(".header__wrap").outerHeight(true) - $(".sticky").outerHeight(true)
$('html, body').animate({
scrollTop: coordsScroll
}, 800);
return false;
});
.block1 {
background-color: red;
}
.block2 {
background-color: yellow;
}
.block3 {
background-color: orange;
}
.block4 {
background-color: blue;
}
.header {
background: green;
}
.header--fixed {
position: fixed;
z-index: 16;
width: 100%;
}
.sticky {
position: sticky;
top: 18px;
z-index: 15;
background: #fff;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header">
<div class="header__wrap">
<div>header content header content</div>
</div>
<div class="mob_desc">test</div>
</header>
<ul class="sticky">
<li><a href="#test1" class="card__box">1</a></li>
<li><a href="#test2" class="card__box">2</a></li>
<li><a href="#test3" class="card__box">3</a></li>
<li><a href="#test4" class="card__box">4</a></li>
</ul>
<section class="block1" id="test1">
<p>block 1 text Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
</section>
<section class="block2" id="test2">
<p>block 2 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
</section>
<section class="block3" id="test3">
<p>block 3 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
</section>
<section class="block4" id="test4">
<p>block 4 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio impedit consequuntur at architecto, nemo quia tempore culpa eveniet vitae nam praesentium temporibus esse quos eaque unde! Accusamus soluta nisi aliquam!</p>
</section>
header
- соответственно все элементы сдвигаются вверх, а первый расчет у тебя производится, пока header виден.