Блок, плывущий за прокруткой страницы
Как сделать блок, который при прокручивании страницы вниз «плывет за ней»? Желательно, средствами CSS. Пример: На главной странице Хабрахабра блок «Лучшее» в правой колонке появляется при прокрутке страницы вниз, если справа есть свободное место.
Отслеживать
задан 31 мар 2014 в 10:23
Dezza Simpson Dezza Simpson
270 1 1 золотой знак 4 4 серебряных знака 13 13 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Возможно, Вы имеете ввиду position: fixed ?
Тогда блок будет всегда в указанном месте и будет следовать прокрутке, однако, плавного эффекта Вы получить не сможете. Здесь Вам сможет помочь JavaScript, который обрабатывает события прокрутки.
Отслеживать
ответ дан 26 апр 2014 в 19:53
141 10 10 бронзовых знаков
- css3
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как закрепить блок меню при прокрутке (sticky)?
Как заставить элементы меню двигаться вместе с прокруткой страницы?
Поискав в интернете понял, что в моём коде родители мешают блоку nav с классом .sticky работать.
Но как понять какой именно параметр в css «блокирует» работу не могу
- Вопрос задан более трёх лет назад
- 1091 просмотр
Комментировать
Решения вопроса 0
Ответы на вопрос 2
Тыжверстальщик! Наверстай мне упущенное.
Липкое позиционирование
Липкое или приклеенное позиционирование используется для фиксации элемента в заданном месте при прокрутке страницы. Как правило, применяется к заголовкам, меню или навигации для быстрого к ним доступа или наглядности. В демонстрации ниже при прокрутке веб-страницы вниз синий блок с навигацией доходит до верхнего края окна и «приклеивается» к нему, фиксируясь на одном месте.
В данной демонстрации липкое позиционирование осуществляется с помощью значения sticky свойства position . При этом с помощью свойства top мы указываем точку, по достижении которой при прокрутке элемент превращается в фиксированный (пример 1).
Пример 1. Использование sticky
Следует понимать, что при вертикальной прокрутке для элемента имеет смысл указывать только top и bottom . При горизонтальной прокрутке будут работать только свойства left и right . Также имеет значение, чтобы высота или ширина родительского контейнера была больше размера элемента. В противном случае не будет полосы прокрутки и элемент останется на своём месте. Если в примере 1 элемент поместить внутрь , то прилипание перестанет работать.
Прилипание элемента можно делать внутри блока с overflow, у которого значение задано как scroll или auto (пример 2).
Пример 2. Использование sticky и overflow
Заголовок
Значение sticky является относительно новым и не все браузеры его поддерживают, в частности, Internet Explorer.
Автор: Влад Мержевич
Последнее изменение: 01.06.2020
Создайте веб-страницу, как показано на рис. 1, чтобы при прокрутке документа меню прилипало к верхнему краю браузера.
Создайте веб-страницу, как показано на рис. 1, чтобы при прокрутке документа блок с картинками социальных сетей прилипал к верхнему краю браузера.
Максимум
Максимум притягивает разрыв функции, дальнейшие выкладки оставим студентам в качестве несложной домашней работы. Матожидание транслирует неопределенный интеграл.
См. также
- overflow
- position
- position в CSS
- relative и absolute
- Абсолютное позиционирование
- Атрибут scroll
- Высота и ширина в CSS
- Использование в вёрстке
- Несколько псевдоэлементов
- Нормальное позиционирование
- Относительное позиционирование
- Очистка float
- Подробнее о позиционировании
- Поток
- Свойства позиционирования
- Фиксированное позиционирование
Рецепты
- Как размыть фоновую картинку?
- Как сделать ячейку таблицы ссылкой?
- Как увеличить картинку при наведении?
Как добавить отступ к прокрутке (html, css)
У меня есть несколько секций с айди и кнопки, которые позволяют по этим секциям перемещаться. А еще, у меня есть хедер, который половину секции закрывает. Вопрос в том, как добавить верхний отступ для прокрутки, или что-то, что позволило бы сделать так, чтобы секция начиналась с хедера, а не под ним. Заранее благодарю за помощь. upd. полный код слишком большой, так что описал сам принцип:
.header < height: 80px; background-color: red; position: sticky; top: 0; width: 100%; >#section1, #section2, #section3 < height: 300px; font-size: 2rem; color: #fff; >#section2 < background-color: blueviolet; >#section3
Этот текст должен быть виден полностью после клика по ссылке Этот текст должен быть виден полностью после клика по ссылке Этот текст должен быть виден полностью после клика по ссылке
upd3. я, вероятно, плохо обьяснил проблему, и совершенно точно прикрепил ужасный код. теперь всё нормально, и проблема, похоже, должна быть более ясна