Как при прокрутке на определённом моменте зафиксировать блок внизу страницы, а когда опять скролишь до этого места он становится на место?

Question

[starkingdom]

Как при прокрутке на определённом моменте зафиксировать блок внизу страницы, а когда опять скролишь до этого места он становится на место?

Answer 1

[FKV]

position: sticky; https://developer.mozilla.org/en-US/docs/Web/CSS/p...

Comments

[starkingdom]

я уже пробовал через эту команду, но почему-то не выходит привязать именно к низу, к верху без проблем, а к низу не выходит

[starkingdom]

может есть ещё какой-то способ

[FKV]

а как вы к низу привязывали?
position: sticky;
bottom: 0;
Так ?

[starkingdom]

ага, и понимая ваш вопрос, мне кажется я тупой) А как надо?

[FKV]

Так и надо. Странно что у вас работает position: sticky; top: 0; - привязка к верху
но не работает position: sticky; bottom: 0; привязка к низу. На codepen скиньте, так проще будет разобраться.

[starkingdom]

FKV, а есть способы как это можно сделать через js?

[starkingdom]

FKV, когда я делаю bottom 0, оно его подхватывает снизу, тобишь я когда я гартаю снизу, оно его там и подхватывает, а мне нужно чтобы я когда вниз скролил, оно резко перескачила вниз, т.к. сверху у меня мобильное меню, а снизу эта штука будет

[WapSter]

starkingdom, если ты через css это не сделал, то как через js это сделать тебе тут статью никто не будет

[starkingdom]

WapSter, оно делается через js, но у меня не хватает знаний сделать. Там просто при скроле на 400 пикселйе, поменять для этого блока стиль, с блок на фиксед и боттом поставить. Но я повторюсь, я не знаю как правильно задать функцию в js

[FKV]

есть - но я сомневаюсь, что ты осилишь самостоятельно, не в обиду.
Раз уж у тебя работает привязка к верху, сделай так
position: sticky;
top: 100%;
transform: translateY(-100%);

[starkingdom]

FKV, ох выручил, спасибо!

[FKV]

starkingdom, Отметь решением тогда)

[starkingdom]

FKV, а ещё такой вопрос, когда до конца доходит такая штука, отступ появляется, с чем может быть связано?

[FKV]

position: sticky;
top: calc(100% - высота серого меню в пикселях);
transform: translateY(-100%); - эту строчку убираем

Например
top: calc(100% - 70px);

[starkingdom]

FKV, оно гартает всё хорошо, но когда доходит до конца такая штука выскакивает, попробовал как вы написали, но так оно тогда не прижимается в плотную к низу экрана

[starkingdom]

FKV, а нет, я ошибся, всё работает!

[FKV]

ну так я написал, что это пример top: calc(100% - 70px);
вам надо узнать высоту вашего меню которое мы прижимаем к низу через devtools
и тут top: calc(100% - 70px); вместо 70px - подставить нужное значение(высоту высоту вашего меню которое мы прижимаем)