Я пытаюсь сделать так, чтобы кнопка ‘Вопрос’ прикреплялась к нижней части экрана, а при прокрутке страницы вниз размещалась над футером. Также хочу, чтобы форма, которая появляется при нажатии на кнопку ‘Вопрос’, вела себя аналогично: прикреплялась к нижней части экрана и при прокрутке садилась на футер. Как это можно реализовать с помощью JavaScript или jQuery? Буду благодарен за любые советы или примеры кода.
я использовал похожую фичу на своем сайте, делал через js. основная идея - отслеживать скролл и менять стили. сначала задаешь кнопке position: fixed, bottom: 0. потом на событие scroll вешаешь функцию, которая проверяет расстояние до футера. если оно меньше высоты кнопки - ставишь position: absolute и считаешь отступ снизу. еще важно учесть ресайз окна, чтобы пересчитывать позицию. получилось около 20 строк кода, работает шустро. если нужны детали - могу поделиться.
Можно попробовать использовать jQuery. Навесь обработчик события scroll на window и проверяй расстояние до футера. Когда оно становится меньше высоты кнопки/формы - меняй position с fixed на absolute. Примерно так:
$(window).scroll(function() {
var distanceToFooter = $(‘footer’).offset().top - $(window).scrollTop();
if (distanceToFooter < buttonHeight) {
$(‘button’).css({position: ‘absolute’, bottom: footerHeight});
} else {
$(‘button’).css({position: ‘fixed’, bottom: 0});
}
});
Главное правильно рассчитать все размеры. Удачи!
Для такой задачи советую использовать комбинацию CSS и JS. Начни с position: fixed для кнопки и формы. Затем на JS отслеживай положение футера через window.addEventListener(‘scroll’, …). Когда футер близко - меняй стиль на position: absolute и bottom: [высота футера]. Можно использовать IntersectionObserver для оптимизации. Главное - правильно рассчитать отступы и учесть разную высоту экранов. Если нужен конкретный код - могу набросать пример.