Как при прокрутке прилепить div к верху?
Как-то так: jsfiddle.net/k8a9je12/20
Лучше, конечно, не инлайново стили задавать, а создать два класса: static и fixed.
jQuery(function($) < function fixDiv() < var $cache = $('#fixed'); if ($(window).scrollTop() >50) $cache.css(< 'position': 'fixed', 'top': '0px' >); else $cache.css(< 'position': 'relative', >); > $(window).scroll(fixDiv); fixDiv(); >);Ответ написан более трёх лет назад
Нравится 7 2 комментария
Как автоматически определить границу экрана, а не через «> 50»?
y0u ну померять отступ, например так $(‘.navbar’).position().top
Ответы на вопрос 2
Учусь на ошибках.
.fixed
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
igoryag2000 @igoryag2000
Нашла именно то решение, которое мне и хотелось, и хочу оставить это знание здесь, чтобы другие люди его быстрее находили при поиске.
div position: sticky; /* Липкое позиционирование */
top: 0; /* Положение сверху */
>
Ответ написан 03 июл.
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
- +1 ещё
Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?
- 1 подписчик
- 3 часа назад
- 23 просмотра
Как зафиксировать слой, чтобы он оставался на одном месте при прокрутке страницы?
Задать положение блочного элемента, чтобы он всегда оставался на одном месте при прокрутке страницы.
Решение
«Замораживание» элемента в определённом месте веб-страницы происходит с помощью стилевого свойства position со значением fixed . При этом положение элемента не меняется даже при прокрутке страницы с помощью скроллинга. Сами координаты задаются через свойства left , right , top и bottom , которые соответственно определяют положение от левого, правого, верхнего и нижнего края окна браузера (пример 1).
Пример 1. Использование position
HTML5 CSS 2.1 IE Cr Op Sa Fx
Фиксированное меню .menu < position: fixed; /* Фиксированное положение */ right: 10px; /* Расстояние от правого края окна браузера */ top: 20%; /* Расстояние сверху */ padding: 10px; /* Поля вокруг текста */ background: #ffe; /* Цвет фона */ border: 1px solid #333; /* Параметры рамки */ >.text Результат данного примера показан на рис. 1. Обратите внимание, что положение элемента не меняется при прокрутке страницы вниз.
Рис. 1. Положение блока с меню
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как закрепить блок при прокрутке страницы
Блок со свойством position: sticky; при прокрутке страницы закрепляется относительно окна браузера опираясь на заданные значения top и/или left , при этом взаимодействует с другими элементами и закрепляется только тогда, когда родительский блок находится в отображаемом окне браузера и закрепленному элементу достаточно места в родительском блоке
Важно понять что для элемента с position: sticky; необходим родительский элемент, у которого будет свободное пространство для закрепленного элемента, если этого пространства нет, то блок со свойством position: sticky; будет вести себя как при position: static; установленном по-умолчанию для всех элементов
Еще раз для наглядности:
Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur quos veritatis distinctio est ipsam repudiandae vel totam asperiores quas! Debitis quam voluptate fuga iure ut deleniti, illum laborum quaerat aut. .sticky__half < width: 50%; min-height: 800px; border: 10px solid #000; >.sticky__body
- Блоку заданы свойства position: sticky; и top: 100px;
- Блок находится в родительском блоке
- Высота блока меньше высоты родительского блока
В итоге, при прокрутке страницы, как только блок достигает расстояние 100px от верха окна браузера, закрепляется. Пока родительский блок находится в пределах отображаемого окна браузера и блоку достаточно места, он будет закреплен, как только места становится недостаточно, то блок открепляется от указанных 100px от верха окна браузера и прокручивается выше вместе с родительским блоком
Отличие от position: fixed;
При position: fixed; элемент никак не взаимодействует с другими элементами, он позиционируется относительно окна браузера отдельно от остальных элементов
Свойство position: fixed; полезно если элемент всегда должен находится в пределах окна браузера и не должен взаимодействовать с другими элементами, например, при верстке кнопки “Наверх” для возврата к началу страницы, которую обычно располагают справа внизу относительно окна браузера — она всегда видна и не затрагивает остальные элементы
Как закрепить шапку сайта
Sticky .header < position: -webkit-sticky; position: sticky /* Закрепляем элемент */; top: 0 /* Указывем на каком расстоянии от верха браузера будет крепиться шапка сайта */; >Блоку добавляем свойство position: sticky; и top: 0; . Родительским элемент для блока является , поэтому при прокрутке страницы блок закрепляется к самому верху окна браузера, пока body будет оставаться в пределах отображаемого окна браузера, а так как основной родительский элемент для всей страницы, то блок будет всегда закреплен к верху окна браузера
Если будем закрелять шапку сайта свойством position: fixed; , то шапка сайта не будет взаимодействовать с другими элементами и следующие за шапкой элементы будут перекрыты шапкой или шапка будет перекрыта следующими элементами в зависимости от z-index .
Свойство position: sticky; поддерживается во всех браузерах, кроме Internet Explorer. В Internet Explorer верстка не ломается, просто элементы остаются по умолчанию position: static; и будут прокручиваться не закрепляясь, поэтому можно использовать данный прием в проектах.
Ссылка на документацию по position — MDN web docs
Как на самом деле работает position: sticky в CSS
У position: sticky уже очень неплохая браузерная поддержка, но большинство разработчиков так и не используют это свойство.
У этого есть две основные причины: во-первых, браузерам потребовалось много времени на реализацию адекватной поддержки этого свойства. И все просто успели забыть о нём.
Во-вторых, многие разработчики до конца не понимают логику, по которой это свойство работает. И тут появляюсь я!
Я полагаю, что вы хорошо знакомы с позиционированием в CSS, но давайте кратко повторим основные моменты:
Ещё три года назад существовало четыре типа позиционирования: static , relative , absolute и fixed .
Основное различие между static и relative , absolute и fixed в том, какое место они занимают в потоке документа (DOM). Элементы с позицией static и relative сохраняют своё естественное положение в потоке документа, в то время как absolute и fixed «вырываются» из потока документа и становятся плавающими.
Новое значение sticky похоже на все предыдущие значения сразу. Я проиллюстрирую это чуть позже.
Моё первое знакомство с «липким» позиционированием
Думаю, что большинство из вас игрались с «липким» позиционированием. Так было и у меня, пока в один момент я не осознал, что совсем не понимаю это свойство.
При первом знакомстве с position: sticky все быстро понимают, что элемент залипает, когда область просмотра достигает определённой позиции.
.some-component position: sticky;
top: 0;
>
Проблема в том, что иногда это работает, а иногда нет. Когда всё работает, то элемент и правда залипает. Но когда не работает, то при прокрутке элемент перестаёт залипать. Как человеку, который живёт одним только CSS, мне было важно разобраться в сути проблемы. Именно поэтому я решил тщательно изучить «липкое» позиционирование.
«Липкая» разведка
Во время своих экспериментов я заметил, что если элемент с position: sticky является единственным ребёнком своего родителя-обёртки, то этот «липкий» элемент не залипает.