Как зафиксировать aside при скроллинге?

Question

[loiks]

нужно чтобы при скроллинге вниз шапка пропадала, а боковая панель aside, наоборот фиксировалась и поднималась ещё выше, на место где раньше была шапка.
Ссылка удалена модератором.

Comments

[Алексей Ярков]

пример как на этом сайте

Так откройте DevTools браузера и сделайте также. Там высота меняется при скролле. Это прям видно глазами.

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.4

[Модератор]

На вопрос «как сделать» отвечает документация и поиск в интернет.

Тут отвечают на вопросы «почему я сделал, как в документации, а оно не работает. Поискал в интернет, вот запросы, в ответах не нашел. Что я делаю не так?»

Покажите, как вы пробовали решить проблему, приведите код попытки (пусть неудачной), опишите, как запускали, что ожидали и что получилось.
За готовыми решениями - на фриланс. В текущем виде это не вопрос, а задание. Нарушен п.5.12 Регламента.

Answer 1

[Иван Филипов]

const height = window.pageYOffset;
И в зависимости от высоты добавляете классы или же просто меняете стили.
el.classList.add('fixed').
Или
el..style.cssText = `
display: fixed;
param2: ...;
`
Так же if else добавить.Но можно использовать intersectionobserver API. Подробнее можно почитать в инете.Надеюсь, помог.

Comments

[Модератор]

Фрагменты кода надо размещать в виде текста и оборачивать тэгом code для корректного отображения. Удобно делать кнопкой </>
Это обязательно, см.п.3.8 Регламента.
Сюда же относится traceback, ввод и вывод в консоли и другая структурированная текстовая инфа.

Answer 2

[Sagrana]

Вот хорошая статья на эту тему. Она правда довольно старая уже, и возможно сейчая это можно сделать проще/лучше.
Плавающий блок (sticky div)

Answer 3

[godsplane]

position:sticky;
top:0;