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

Question

[hostadmin]

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

Как сделать, чтобы DIV с кнопками плавал внизу экрана, если его обычное расположение находится вне области видимости, но при прокрутке страницы кнопки находились на своем месте?

Понимаю, что тут нужны какие-то скрипты, которые будут проверять видимость нужной области и делать fixed, но до конкретной реализации пока не додумался.

Comments

[Adamos]

А начать форму с кнопки "Сохранить" не судьба? Apple, например, так делает...

[hostadmin]

Adamos, не судьба.

[Adamos]

hostadmin, просто меня лично куда больше огорчит форма, в которой внезапно обнаруживается больше полей, чем можно судить по кнопке "Сохранить". И на маленьких экранах эта самая кнопка может просто мешать нормально заполнять форму...

[Рома Зварич]

hostadmin, поддержка IE нужна?

[hostadmin]

Рома Зварич, хотелось бы.

Answer 1

[Рома Зварич]

Если не нужен IE, можно сделать с помощью чистого CSS.
А именно, с помощью position: sticky;

UPD: вижу, что IE нужен

Результат:
https://codepen.io/hisbvdis/pen/bGbPPJN

Comments

[hostadmin]

О блин! sticky и правда то, что нужно.
Я думал о нём, но не стал использовать, сейчас уже не помню почему, но наверно из-за малой совместимости со старыми браузерами.

[hostadmin]

В общем использовал CSS sticky и библиотеку https://github.com/wilddeer/stickyfill для поддержки старых браузеров.