У меня есть простой заголовок, который прилипает к свитку. Я хочу разделить его на три секции, используя сетку. Каждый ресурс, к которому я обращался, заставлял меня полагать, что мой код должен быть функциональным. Очевидно, здесь есть проблема, которую я не понимаю. Что я делаю неправильно? Вот это CSS:
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
}
.content {
padding: 16px;
width: 200px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 120px;
}
#mainHeader {
color: white;
}
.bannerContainer {
display: grid;
grid-columns: 1fr 1fr 1fr;
grid-template-areas:
"left center right";
}
.siderLeft {
text-align: center;
grid-area: left;
}
.siderRight {
grid-area: right;
}
.bannerHead {
text-align: center;
grid-area: center;
}
Кроме того, вот соответствующее HTML:
<body>
<div class="header" id="mainHeader">
<h2 class="bannerHead">An Ongoing Portfolio</h2>
<p class="siderLeft">Placeholders</p>
<p class="siderRight">Placeholders</p>
</div>
//content here
<script>
window.onscroll = function() {scrollStick()};
var header = document.getElementById("mainHeader");
var sticky = header.offsetTop;
function scrollStick() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
</body>
Любое понимание было бы здорово, спасибо.