Есть закрепленный див (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>
Оборудование для ресторана: новинки профессиональной кухонной техники
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
Я новичок, создаю простой калькулятор
Пишу небольшую программку для себя, в результате выполнения получаю ошибку