Как увеличивать размер страницы при смене позиционирования?

Question

[Александр]

Добрый день. Сделал jquery анимацию таким образом, чтобы блоки текста выезжали справа и вставали на нужное место. Однако самые нижние блоки встают на месте футера и ниже него, и появляется вторая вертикальная полоса прокрутки. То есть высота всего дизайна остается той, что была изначально, просто внизу появляются блоки на белом фоне.

Как сделать так, чтобы высота сайта увеличивалась при появлении этих блоков и чтобы не было второй полосы прокрутки?

Части кода для этого блока ниже:

.btare2{
position: absolute;
top: 10px;
left:-3000px;
}

$('.btn3').click(function() { 
        $('.btare2').animate({left: '0px', top: '5000px' }, 1000);
     });

Answer 1

[Константин]

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

.container {
  height: 100vh;
}

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

.btare2 {
  margin-top: -5000px;
}

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

$('.btn3').click(function() {
  $('.btare2').animate({ marginTop: '0px' }, 1000);
});

пробуй

Comments

[Александр]

Спасибо. Помогло использование margin-right