CSS - исправление элемента в самом низу страницы для горизонтальной прокрутки влево / вправо

Question

У меня есть веб-сайт с горизонтальной прокруткой с помощью этого сценария: http://tympanus.net/Tutorials/WebsiteScrolling/index.html

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

У меня есть немного информации нижнего колонтитула, которую я хочу прокрутить вместе со страницей по горизонтали, но я хочу, чтобы она всегда была в ОЧЕНЬ нижней части страницы, если есть полоса прокрутки, а не только окно. Используя этот CSS:

.footer { position: fixed; bottom: 10px; left: 100px; } 

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

Так что я тоже попробовал что-то вроде этого:

html, body { min-height: 900px; } 
.footer { position: fixed; top: 880px; left: 100px; }

Что также не сработало, потому что информация все еще всегда отталкивалась от видимой части страницы.

Поэтому я ищу решение, позволяющее, по существу, размещать информацию нижнего колонтитула там, где она естественным образом попадает на страницу, но всегда фиксировать 100 пикселей слева при горизонтальной прокрутке страницы.

Спасибо за любую помощь!

Answer 1

Я не уверен, что вы можете сделать это полностью с помощью CSS.Я хотел бы создать функцию javascript (или jquery), которая определяет размер содержимого div (или тела) и позиционирует ваш div нижнего колонтитула после него (с offset , если вы используете jquery, или манипулируя верхниммаржа если нет).Затем вы можете использовать метод .scroll в окне, чтобы переместить горизонтальную позицию div, когда пользователь прокручивает вправо.