2015-02-09 4 views
0

Я использую bootstrap для своего сайта и получил localscroll для правильной работы (я использую стандартный навигационный штрих-код). Все идет нормально.Покрытие фона img и jquery localscroll

Далее я хотел реализовать полноэкранный фон, который правильно работает на настольных компьютерах и мобильных устройствах (iphone, android и т. Д.). Фоновое изображение должно охватывать весь экран и не должно перемещаться, когда пользователь прокручивает содержимое страницы. Единственное решение, которое я смог найти (после довольно длительного поиска), был следующим:

html { 
    background: url('images/ny-building-xs-optimized.jpg') no-repeat center center fixed !important; 
    background-size: cover !important; 
    height: 100%; 
    overflow: hidden; 
} 

body { 
    height: 100%; 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; /* smooth scrolling on ios */ 
} 

Это отлично работает!

Теперь, если я объединил этот полноэкранный фон css с localscroll. Localscroll перестает работать. Что странно, потому что я где-то читал, что для того, чтобы заставить localscroll работать, вам нужно установить высоту и установить переполнение для прокрутки. Оба установлены.

Если я удаляю переполнение: скрытый css из тега html, чем localscroll работает, но фон не работает правильно на моем iphone (он прокручивается и увеличивается до полного размера содержимого - вместо окна просмотра).

У кого-нибудь есть решение, в котором работает фоновое изображение, и localscroll продолжает работать?

Спасибо!

ответ

0

В итоге я использовал разделенный div для статического фона, который решил все мои проблемы.

Это, однако, привело к новой проблеме на мобильных устройствах. См. White area on fixed background when scrolling on ios