Можно ли сделать так, чтобы боковое меню перестало быть sticky, когда мы долистаем к footer(нижней части нашей страницы)?

Question

Я хочу сделать так, чтобы в определённый момент (когда мы долистаем к 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 код:

.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;
}

Answer 1

Да можно всё. sticky зависит от родительского блока. Так как у Вас родительский – это .grid__body, то и правый блок останавливается в самом низу.

Как вы хотите сделать – у Вас sticky должен быть внутри aside. Или вариант похуже: main+aside обернут в дополнительный блок.

.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;
  z-index: 10;
}

main {
  background-color: aqua;
}

aside {
  height: 100%;
  background-color: #444;
}

.aside-content {
  position: sticky;
  top: 150px;
  background: pink;
  height: 150px;
  /* Как пример, чтобы показать остановку блока */
}

nav {
  position: sticky;
  top: 0;
  background-color: #777;
  z-index: 10;
}

footer {
  background-color: green;
}

<!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">
        <div class="aside-content">4</div>
      </aside>
      <footer class="grid-footer">5</footer>
    </div>
  </div>
</body>

</html>

БЛОГ НА HUSL

Можно ли сделать так, чтобы боковое меню перестало быть sticky, когда мы долистаем к footer(нижней части нашей страницы)?

Ответы (1 шт):