Как сделать чтобы один элемент был прилеплен, пока второй скролится(css/jquery)?
Вот как тут
Желательно jquery, но если никак - тогда ваннилой.
Я бы понял, если бы "когда блок с галереей on scroll, то summary задается класс, у которого position absolute или fixed", а когда уже не скроллится - то класс уходит.
Но тут посложнее - summary перестает быть avsolute или fixed не совсем когда перестают скроллить, а когда доскроливают где-то пикселей 30-50 до низа галереи. Я не сильно пойму логику.
Может быть есть примеры на кодпене или jsfiddle?
Может быть этому есть специльное название? Я хочу понять и поизучать на чем-то похожем, мне надо по заданию так сделать.
Дополнительно:
Вы, наверно, удивитесь, но кроме absolute с fixed, есть ещё position: sticky. Им собственно и сделано, без js.
Но тут посложнее - summary перестает быть avsolute или fixed не совсем когда перестают скроллить, а когда доскроливают где-то пикселей 30-50 до низа галереи. Я не сильно пойму логику.
Там в top передается высота хедера через кастомное свойство css.
И обычный position sticky
Поизучайте что там есть в инструментах разработчика.
Вот я задаю summary position sticky - кручу по галерее, а summary не прилипает.
В примере нет summary. Но предположим, что это .side
Что-то наверно перебивает?
Да, геометрия немножко мешается...
Задайте для .footer height: 100vh
Надеюсь, что прояснится.
summary маленькое?
Я про песочницу
Либо summary либо то, что после либо экран слишком большой :) Поэтому не достает до низа.
Вот пример куда я пробую это применить. Не песочница. Вот в этом месте
relative-то где?
1. Для работы стики, родительскому блоку не нужен relative, это я выше написала ерунду. Извините.
2. Почему у вас бутстрап подключается после ваших стилей?? Всегда сначала сбросы, бутстрапы, стили каруселей и прочее барахло. И последней строкой, как волшебница в сказке, ваши стили.
3. Стики не будет работать, если у родителя на любом уровне (бабушки, дедушки, прабабушки) есть overflow.
У вас он задан прямо для body (фу-фу так делать, да и на мобилках все равно не спасет)
overflow убрал, все равно не помогло. вроде бы нигде больше нету, по крайней мере на странице карточки товара. за информацию про sticky и overflow в целом спасибо, я запомню.
какой стиль идет после всех -тот и перебивает что-то, если надо - разве нет?
Да, именно так. Поэтому свои стили должны быть последними.
все равно не помогло
Через dev tools работало.
Ответы:
position: sticky; top: 0; /* Нужно число px или других единиц от верха вьюпорта */ |
position: sticky; top: 0; /* Нужно число px или других единиц от верха вьюпорта */
По изучайте внимательно position: sticky, там есть тонкости.
- Что-то не получается. Вот пример куда я пробую это применить. Не песочница. row, который по умолчанию display flex, в нем слева col-6,и в col-6 галерея, а справа col-4, в col-4 summary. Вот я задаю summary position sticky - кручу по галерее, а summary не прилипает. Пробую col-4 как родителю задать position sticky - тоже нет. Что-то наверно перебивает? Вот в этом месте
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы один элемент оставался прилеплен к верхней или нижней части экрана, пока второй элемент скролится, можно использовать CSS или jQuery.
Если вы хотите прилепить элемент к верхней части экрана, пока другой элемент скролится, вы можете использовать следующий CSS:
.fixed-element { position: fixed; top: 0; left: 0; width: 100%; }
В данном примере элемент с классом "fixed-element" будет прилеплен к верхней части экрана и останется на месте при прокрутке страницы.
Если же вы хотите прилепить элемент к нижней части экрана, можно использовать следующий CSS:
.fixed-element { position: fixed; bottom: 0; left: 0; width: 100%; }
Таким образом, элемент будет прилеплен к нижней части экрана и останется на месте при прокрутке страницы.
Если вам нужно реализовать данное поведение с помощью jQuery, можно использовать следующий скрипт:
$(document).ready(function() { var $fixedElement = $('.fixed-element'); var $scrollingElement = $('.scrolling-element'); $(window).scroll(function() { var scrollTop = $(this).scrollTop(); var scrollingElementBottom = $scrollingElement.offset().top + $scrollingElement.height(); if (scrollTop > scrollingElementBottom) { $fixedElement.css('position', 'fixed').css('top', 0); } else { $fixedElement.css('position', 'static'); } }); });
Этот скрипт будет проверять положение скролла на странице и прилеплять элемент с классом "fixed-element" к верхней части экрана, когда другой элемент с классом "scrolling-element" начинает скролиться.
Надеюсь, данное решение поможет вам реализовать нужное поведение на вашем сайте.