Как сделать ограничение плавающему элементу?

Question

[tosster22]

Есть плавающий элемент на странице в сайдбаре. У него css свойство position: fixed; width: 100%. При пролистывании страницы элемент может заехать на footer сайта. Как сделать так, чтобы элемент не мог заезжать на header и footer сайта? Контент на каждой странице очень сильно может отличаться по размеру и соответственно длина сайдбара растягивается.

Comments

[Rustam Bainazarov]

JS.

[tosster22]

Рустам Байназаров, пример какой-то можете привести? или скажите в какую сторону гуглить

[Rustam Bainazarov]

tosster22, через полчаса приведу примет.

[Rustam Bainazarov]

tosster22, хотя подождите, position: sticky; тут вам не поможет, посмотрите?

[Rustam Bainazarov]

tosster22, можно для простоты вот этот плагин использовать:
https://dollarshaveclub.github.io/stickybits/

Он сам будет это делать + если нет поддержки sticky, то будет делать на fixed.

[tosster22]

Рустам Байназаров, и как всегда большое спасибо. sticky помогло

[Rustam Bainazarov]

tosster22, гы-гы, тогда уж ответ напишу, буду малой кровью набивать себе рейтинг.

[tosster22]

Рустам Байназаров, пишите, а то вы постоянно отвечаете в комментариях)) если ответ помог, то почему бы его не отметить как правильный и не добавить отвечающему рейтинга))

Answer 1

[Rustam Bainazarov]

Если есть контент, который должен «плавать» внутри непосредственного родительского блока без сложной логики этого действия, то можно использовать position: sticky;. Но он поддерживается не всеми браузерами.

Для условной автоматизации этого дела есть хороший плагин https://dollarshaveclub.github.io/stickybits — там, где нет sticky, он сделает с помощью fixed и наоборот.

position: sticky; хорош тем, что он не добавляет никаких слушателей прокруток и т. п., что положительно сказывается на производительности страницы.

P. S. Но без JS не обойтись вовсе, если нужно добавить логику по типу «если плавающий элемент доходит до какого-то элемента внутри общего родительского блока, то сделать то-то, то-то».

Answer 2

[MamaLuyba]

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