Есть закрепленный див (position: fixed;) например высотой 20px, он закрывает начало на 20px обычного следующего блока. Подскажите как можно исправить?
Сейчас беру новый див с 20px. Fixed его перекрывает и выходит норм
В данном случае стоит использовать css свойство position со значением sticky;
position: sticky;
position: sticky; - хорошее быстрое решение, но с поддержкой браузерами у него пока проблемы, поэтому на продакшене лучше пойти через js, тем более, что понадобится 10 строчек ванилы.
var node = document.getElementById('menu_sticky'),
nodeOffs = node.offsetTop;
window.addEventListener('scroll', function() {
var scrollPos = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
if (scrollPos > nodeOffs) {
node.classList.add('_stickied');
} else {
node.classList.remove('_stickied');
}
});
body {
padding: 300px 0 0 0;
margin:0;
height: 200vh;
}
.menu._sticky {
height: 50px;
width:100%;
background-color:red;
}
.menu._sticky._stickied {
position: fixed;
top: 0;
left: 0;
}
<nav class="menu _header _sticky" id="menu_sticky"></nav>
Сборка персонального компьютера от Artline: умный выбор для современных пользователей