Как увеличивать размер страницы при смене позиционирования?
Добрый день. Сделал jquery анимацию таким образом, чтобы блоки текста выезжали справа и вставали на нужное место. Однако самые нижние блоки встают на месте футера и ниже него, и появляется вторая вертикальная полоса прокрутки. То есть высота всего дизайна остается той, что была изначально, просто внизу появляются блоки на белом фоне.
Как сделать так, чтобы высота сайта увеличивалась при появлении этих блоков и чтобы не было второй полосы прокрутки?
Части кода для этого блока ниже:
.btare2{ position: absolute; top: 10px; left:-3000px; } |
.btare2{ position: absolute; top: 10px; left:-3000px; }
$('.btn3').click(function() { $('.btare2').animate({left: '0px', top: '5000px' }, 1000); }); |
$('.btn3').click(function() { $('.btare2').animate({left: '0px', top: '5000px' }, 1000); });
Дополнительно:
Привет. Начни с установки высоты контейнера, чтобы занимать всю доступную вертикальную область на странице
.container { height: 100vh; } |
.container { height: 100vh; }
далее, лучше вместо абсолютного позиционирования использовать margin top с отрицательными значениями для перемещения блоков вверх за пределы видимой области
.btare2 { margin-top: -5000px; } |
.btare2 { margin-top: -5000px; }
ну и поменяем твою анимацию и теперь, после изменений, блоки текста должны выезжать справа, увеличивая высоту сайта, и не появится вторая полоса прокрутки
$('.btn3').click(function() { $('.btare2').animate({ marginTop: '0px' }, 1000); }); |
$('.btn3').click(function() { $('.btare2').animate({ marginTop: '0px' }, 1000); });
пробуй
- Спасибо. Помогло использование margin-right
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема из-за
position: absolute. Абсолютно позиционированный блок выпадает из обычного потока документа, поэтому его перемещение не увеличивает высоту страницы. Браузер не считает такой блок частью нормальной высоты контейнера, и он может наехать на футер или создать странную прокрутку.Если блок должен появляться и раздвигать страницу, оставьте его в потоке и анимируйте свойства, которые не вырывают элемент из раскладки:
max-height,margin,transformв сочетании с видимым контейнером..btare2 { overflow: hidden; max-height: 0; opacity: 0; transform: translateX(-60px); transition: max-height .4s ease, opacity .3s ease, transform .4s ease; } .btare2.is-open { max-height: 5000px; opacity: 1; transform: translateX(0); }
jQuery(function ($) { $('.btn3').on('click', function () { $('.btare2').addClass('is-open'); }); });jQuery(function ($) { $('.btn3').on('click', function () { $('.btare2').addClass('is-open'); }); });
Если нужна именно анимация «выезда справа», можно использовать
transform: translateX(100%), но элемент всё равно должен занимать место в потоке. Не двигайте его наtop: 5000px: это визуальный сдвиг, а не нормальное увеличение документа.Перед внедрением на рабочем сайте проверьте решение на копии или хотя бы сделайте резервную копию изменяемого файла. После правки включите отображение ошибок, откройте проблемную страницу в обычном и приватном окне, проверьте консоль браузера и логи PHP. Если задача связана с WordPress, WooCommerce или ACF, дополнительно проверьте поведение после очистки кэша и после выхода из админки: часть ошибок видна только для незалогиненного пользователя.
Если код работает только в одном шаблоне, лучше не оставлять его разрозненно в нескольких файлах. Вынесите повторяемую логику в функцию, небольшой плагин или template part, а в шаблоне оставьте только вызов. Так проще поддерживать решение после обновления темы, плагинов и PHP.