Как сделать два прилипающих блока при скроле?
Ссылка скопирована
Правый блок прилипающий при скролле. Как сделать так что-бы красный блок(right-blog-content) прилипал к синему блоку(right-read) при скролле. Сейчас они прилипают сразу и вместе. А нужно что-бы по очереди, сначало красный, когда красный доходит до синего, синий прилипал к нему и они двигались вместе. Спасибо
snippet
Дополнительно:
Нужно решить такую задачу?
Заказать помощь
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Лучший ответ
1
Никита Орлов
Ответ
Другие ответы (0)
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопроскомментарий
Вам также может быть интересно
VPN
Как правильно настроить vless для Android TV?
1 ответ
Pyrogram
Как правильно зарегистрировать юзер бота в Telegram?
1 ответ
печатные-платы
Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro?
1 ответ
1С-Битрикс
Можно ли быстро сделать зеркало сайта на связке Битрикс+Аспро с другими настройками?
1 ответ
Для создания двух прилипающих блоков при скролле на веб-странице, можно использовать CSS и JavaScript.
Вот пример кода, который поможет вам реализовать данную функциональность:
1. HTML структура:
```html
```
2. CSS стили:
```html
.sticky-container {
position: relative;
}
.sticky-block1 {
position: sticky;
top: 0;
background-color: #f1f1f1;
}
.sticky-block2 {
position: sticky;
top: 0;
background-color: #f9f9f9;
}
```
3. JavaScript код:
```html
window.onscroll = function() {
var block1 = document.querySelector('.sticky-block1');
var block2 = document.querySelector('.sticky-block2');
if (window.pageYOffset > 100) {
block1.style.top = '10px';
block2.style.top = '10px';
} else {
block1.style.top = '0';
block2.style.top = '0';
}
};
```
Просто скопируйте приведенный выше код и вставьте его в свой HTML документ. После этого у вас должны появиться два прилипающих блока, которые останутся на месте при прокрутке страницы вверх или вниз.
Надеюсь, это поможет вам решить вашу проблему! Если у вас есть еще вопросы, не стесняйтесь задавать.