Как сделать чтобы один элемент был прилеплен, пока второй скролится(css/jquery)?

Question

[alexiusgrey]

Вот как тут
Желательно jquery, но если никак - тогда ваннилой.

Я бы понял, если бы "когда блок с галереей on scroll, то summary задается класс, у которого position absolute или fixed", а когда уже не скроллится - то класс уходит.

Но тут посложнее - summary перестает быть avsolute или fixed не совсем когда перестают скроллить, а когда доскроливают где-то пикселей 30-50 до низа галереи. Я не сильно пойму логику.

Может быть есть примеры на кодпене или jsfiddle?
Может быть этому есть специльное название? Я хочу понять и поизучать на чем-то похожем, мне надо по заданию так сделать.

Comments

[Кирилл Никитин]

Вы, наверно, удивитесь, но кроме absolute с fixed, есть ещё position: sticky. Им собственно и сделано, без js.

[Ankhena]

Но тут посложнее - summary перестает быть avsolute или fixed не совсем когда перестают скроллить, а когда доскроливают где-то пикселей 30-50 до низа галереи. Я не сильно пойму логику.

Там в top передается высота хедера через кастомное свойство css.
И обычный position sticky

Поизучайте что там есть в инструментах разработчика.

[alexiusgrey]

Ankhena, то я видел, я не про верх, а наоборот когда низ. фотка платья самая нижняя, когда доскроливается до почти-низа, то контент крутится уже не в границах галереи, а к блоку, окторый ниже галереи и summary

[alexiusgrey]

Кирилл Никитин, ее существованию я не удивляюсь, потому что в инспекторе кода я ее видел, но никогда не использовал. что-то не получается. Я задаю и своему summary, и его родителю, нету такого эффекта.

[Ankhena]

alexiusgrey, не вижу внизу ничего кроме обычных padding и margin

[alexiusgrey]

Ankhena, вот упрощенный пример , а я пробую не получается. Тоже как бы row, который по умолчанию display flex, в нем слева col-6,и в col-6 галерея, а справа col-4, в col-4 summary. Вот я задаю summary position sticky - кручу по галерее, а summary не прилипает. Пробую col-4 как родителю задать position sticky - тоже нет. Что-то наверно перебивает? Механизм самого position sticky простой?

[Ankhena]

Вот я задаю summary position sticky - кручу по галерее, а summary не прилипает.

В примере нет summary. Но предположим, что это .side

Что-то наверно перебивает?

Да, геометрия немножко мешается...
Задайте для .footer height: 100vh
Надеюсь, что прояснится.

[alexiusgrey]

Ankhena, у меня не вариант делать высокий футер. Вот пример куда я пробую это применить. Не песочница. Вот в этом месте

[Ankhena]

alexiusgrey, да без разницы что там делать высоким. Если нечего прокручивать, то и не прилипнет. Просто потому что не достает.

[alexiusgrey]

Ankhena, summary маленькое? хотят чтоб когда галерею крутят вниз, summary не оставалось наверху

[Ankhena]

alexiusgrey,

summary маленькое?

Я про песочницу
Либо summary либо то, что после либо экран слишком большой :) Поэтому не достает до низа.

Вот пример куда я пробую это применить. Не песочница. Вот в этом месте

relative-то где?

[alexiusgrey]

Ankhena, у col-ов он в бутстрапе по умолчанию, потому и перебиваю important-ом, а row пробую проставить relative - что-то тоже не хочет.

[Ankhena]

alexiusgrey,
1. Для работы стики, родительскому блоку не нужен relative, это я выше написала ерунду. Извините.
2. Почему у вас бутстрап подключается после ваших стилей?? Всегда сначала сбросы, бутстрапы, стили каруселей и прочее барахло. И последней строкой, как волшебница в сказке, ваши стили.
3. Стики не будет работать, если у родителя на любом уровне (бабушки, дедушки, прабабушки) есть overflow.
У вас он задан прямо для body (фу-фу так делать, да и на мобилках все равно не спасет)

[alexiusgrey]

Ankhena, про порядок стилей никогда особо не заморачивался, не думал что он неправильный - в андерскоре так, у других так. какой стиль идет после всех -тот и перебивает что-то, если надо - разве нет?

overflow убрал, все равно не помогло. вроде бы нигде больше нету, по крайней мере на странице карточки товара. за информацию про sticky и overflow в целом спасибо, я запомню.

[Ankhena]

alexiusgrey,

какой стиль идет после всех -тот и перебивает что-то, если надо - разве нет?

Да, именно так. Поэтому свои стили должны быть последними.

все равно не помогло

Через dev tools работало.

[Ankhena]

alexiusgrey, а, вспомнила, align-self ещё для маленького

[alexiusgrey]

Ankhena, походу у меня закешировалось.я на другом товаре попробовал.где заполнен контент, там получилось, спасибо! я не знаю смогу прям в конец или нет свои стили, там некоторые тянутся из плагинов, хотя я стараюсь ставить их только там, где сам прям вообще никак - на оплаты, на интеграции и все.

Answer 1

[Pavstyuk]

position: sticky;
top: 0; /* Нужно число px или других единиц от верха вьюпорта */

По изучайте внимательно position: sticky, там есть тонкости.

Comments

[alexiusgrey]

Что-то не получается. Вот пример куда я пробую это применить. Не песочница. row, который по умолчанию display flex, в нем слева col-6,и в col-6 галерея, а справа col-4, в col-4 summary. Вот я задаю summary position sticky - кручу по галерее, а summary не прилипает. Пробую col-4 как родителю задать position sticky - тоже нет. Что-то наверно перебивает? Вот в этом месте