Я хотел бы создать div, который расположен под блоком контента, но который, как только страница прокручивается достаточно для контакта с ее верхней границей, фиксируется на месте и прокручивается вместе со страницей.
javascript
jquery
css
scroll
positioning
evanr
источник
источник
position: sticky; top:0;
работает в большинстве браузеров в январе 2017 года.position: sticky;
вещь волшебная.Ответы:
Вы можете использовать просто CSS, позиционируя свой элемент как фиксированный :
Редактировать: у вас должен быть элемент с абсолютной позицией, как только смещение прокрутки достигнет элемента, его следует изменить на фиксированное, а верхнюю позицию установить на ноль.
Вы можете определить верхнее смещение прокрутки документа с помощью функции scrollTop :
Когда смещение прокрутки достигнет 200, элемент будет прикреплен к верхней части окна браузера, поскольку размещается как фиксированный.
источник
if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed') { $('.fixedElement').css({'position': 'static', 'top': '0px'}); }
new example
ссылку вы дали настолько чистая и прозрачная , что я не могу даже увидеть! -_-Вы видели этот пример на странице проблемы Google Code и (только недавно) на странице редактирования Stack Overflow.
Ответ CMS не отменяет позиционирование при прокрутке вверх. Вот бесстыдно украденный код из Stack Overflow:
И простая живая демонстрация .
Это зарождающаяся альтернатива без сценариев
position: sticky
, которая поддерживается в Chrome, Firefox и Safari. Смотрите статью о HTML5Rocks и демо , а также документы Mozilla .источник
offset
должно перестать принимать объект в качестве ввода api.jquery.com/offset . @Eddie Ваша модификация должна быть безопасной с текущим jQuery.var d = $("#scroller-anchor").offset().top;
сvar d = $("#sidebar").offset().top;
и избавиться от пустого скроллер-анкерной DIV все вместе? Вот моя вилка, демонстрирующая, о чем я говорю.По состоянию на январь 2017 года и выпуск Chrome 56 большинство браузеров общего пользования поддерживают
position: sticky
свойство в CSS.делает трюк для меня в Firefox и Chrome.
В Safari вам все еще нужно использовать
position: -webkit-sticky
.Полифиллы доступны для Internet Explorer и Edge; https://github.com/wilddeer/stickyfill кажется хорошим.
источник
У меня была та же проблема, что и у вас, и я решил создать плагин jQuery, чтобы позаботиться об этом. Он фактически решает все проблемы, перечисленные здесь людьми, а также добавляет несколько дополнительных функций.
Параметры
https://github.com/donnyv/sticky-panel
демо: http://htmlpreview.github.io/?https://github.com/donnyv/sticky-panel/blob/master/jquery.stickyPanel/Main.htm
источник
code
// отсоединить панель node.css ({"margin": 0, «left»: nodeLeft, «top»: newNodeTop, «position»: «fixed», «width»: node.width ()});code
И вот как без jquery (ОБНОВЛЕНИЕ: см. Другие ответы, где вы можете сделать это только с помощью CSS)
источник
Вот как я это сделал с помощью jquery. Все это было объединено различными ответами на переполнение стека. Это решение кэширует селекторы для более быстрой работы, а также решает проблему «скачка», когда липкий div становится липким.
Проверьте это на jsfiddle: http://jsfiddle.net/HQS8s/
CSS:
JS:
источник
Вот еще один вариант:
JAVASCRIPT
Вы
#myElementToStick
должны начать сposition:absolute
CSS-свойства.источник
Как сказали Джош Ли и Колин Тарт , вы можете просто использовать
position: sticky; top: 0;
подать заявку на div, который вы хотите прокрутить в ...Кроме того, единственное, что вам нужно сделать, это скопировать это в верхнюю часть вашей страницы или отформатировать так, чтобы оно вписывалось во внешний лист CSS:
Просто замените
#sticky_div's_name_here
имя вашего div, то есть, если бы ваш div был,<div id="example">
вы бы поставили#example { position: sticky; top: 0; }
.источник
Мое решение немного многословно, но оно обрабатывает переменное позиционирование от левого края для центрированных макетов.
источник
Вот еще одна версия, чтобы попробовать для тех, у кого есть проблемы с другими. Он объединяет методы, обсуждаемые в этом повторяющемся вопросе , и динамически генерирует необходимые вспомогательные DIV, поэтому дополнительный HTML не требуется.
CSS:
JQuery:
Чтобы сделать элемент липким, выполните:
Когда элемент становится закрепленным, код управляет положением оставшегося содержимого, чтобы он не прыгнул в промежуток, оставленный закрепленным элементом. Он также возвращает липкий элемент в исходное незакрепленное положение при прокрутке над ним.
источник
Вот расширенная версия ответа Джоша Ли. Если вы хотите, чтобы div находился на боковой панели справа и перемещался в пределах диапазона (т. Е. Вам нужно указать верхнюю и нижнюю позиции привязки). Это также исправляет ошибку, когда вы просматриваете это на мобильных устройствах (вам нужно проверить левую позицию прокрутки, иначе div переместится за пределы экрана).
источник
Я сталкивался с этим, когда искал то же самое. Я знаю, что это старый вопрос, но я решил предложить более свежий ответ.
У Scrollorama есть функция «закрепить», и это именно то, что я искал.
http://johnpolacek.github.io/scrollorama/
источник
Информация, предоставленная для ответа на этот другой вопрос, может помочь вам, Эван:
Проверьте, виден ли элемент после прокрутки
По сути, вы хотите изменить стиль элемента, чтобы установить его на фиксированный, только после проверки того, что значение document.body.scrollTop равно или больше, чем верх вашего элемента.
источник
Принятый ответ работает, но не возвращается к предыдущей позиции, если вы прокручиваете ее выше. Он всегда прилипает к вершине после того, как его там поместили.
Ответ Джлидева должен был сработать, но я не смог заставить его работать. Его страница с примером также не сработала (для меня).
источник
Вы можете добавить 3 дополнительные строки, чтобы, когда пользователь прокручивал страницу до вершины, div оставался на прежнем месте:
Вот код:
источник
У меня есть ссылки настройки в div, так что это вертикальный список букв и цифр ссылок.
Затем я настроил эту удобную функцию jQuery, чтобы сохранить загруженную позицию, а затем изменил положение на фиксированное при прокрутке за пределы этой позиции.
ПРИМЕЧАНИЕ: это работает, только если ссылки видны при загрузке страницы !!
источник
Я использовал некоторые из работ выше, чтобы создать эту технологию. Я немного улучшил его и подумал, что поделюсь своей работой. Надеюсь это поможет.
код jsfuddle
Это немного более динамичный способ сделать прокрутку. Это требует некоторой работы, и я в какой-то момент превращу это в пробку, но это то, что я придумал после часа работы.
источник
В javascript вы можете сделать:
источник
Не точное решение, но отличная альтернатива для рассмотрения
этот CSS ТОЛЬКО верхняя часть полосы прокрутки экрана . Решено все проблемы с ТОЛЬКО CSS , NO JavaScript, NO JQuery, нет Brain работы ( лол ).
Наслаждайся моей скрипкой : D все коды там включены :)
CSS
Поместите контент достаточно долго, чтобы вы могли увидеть эффект здесь :) О, и ссылка там тоже, за то, что он заслуживает его уважения
ТОЛЬКО CSS Верхняя часть полосы прокрутки экрана
источник
Вот пример, который использует jquery-видимый плагин: http://jsfiddle.net/711p4em4/ .
HTML:
CSS:
JS (включает jquery-видимый плагин):
источник
липкий, пока нижний колонтитул не попадет в div:
источник