Я хочу сделать так, чтобы в определённый момент (когда мы долистаем к footer) боковое навигационное меню (aside) перестало быть со свойством sticky, и чтобы оно не заступало footer. Можно ли это реализовать, и как ?
Вот мой HTML код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>тест</title>
<link rel="stylesheet" href="style_of_main_page.css" type="text/css">
</head>
<body>
<div class="grid">
<div class="grid__body">
<header class="grid-header">1</header>
<nav class="grid-navigation">2</nav>
<main class="grid-content">3</main>
<aside class="grid-side">4</aside>
<footer class="grid-footer">5</footer>
</div>
</div>
</body>
</html>
Вот мой CSS код;
.grid-header {
grid-area: header;
}
.grid-navigation {
grid-area: nav;
}
.grid-content {
grid-area: content;
}
.grid-side {
grid-area: side;
}
.grid-footer {
grid-area: footer;
}
.grid__body {
display: grid;
grid-template: 0px ;
grid-template:
[start] "header header" 200px [row2]
[row2] "nav nav" 150px [row3]
[row3] "content side" 800px [row4]
[row4] "footer footer" 600px [row-end] / 1fr 150px;
}
header,
nav,
main,
aside,
footer {
border-style: dotted;
border-width: 0.1px;
}
header {
background-color: violet;
}
main {
background-color: aqua;
}
aside {
position: sticky;
top: 150px;
background-color: #444;
}
nav {
position: sticky;
top: 0;
background-color: #777;
}
footer {
background-color: green;
}
Простой
