1

Есть header, 2 блока справа и слева и по центру блок с контентом. Задача закрепить все блоки так, чтобы при прокрутки двигался только центральный блок:

введите сюда описание изображения Если использовать position fixed, все конечно работает, но как только появляется горизонтальный скролл -начинаются проблемы. Верхняя шапка режется, при прокрутке в право левый блок наезжает на контент.

В качестве решения можно с помощью js вычислять margin-left при событии scroll, однако проблема возникает на телефонах, когда событие срабатывает только тогда, когда закончится анимация движения, в результате чего блоки ездят (тоже происходит и в сафари под маком).

Есть ли какие-то варианты решения такой проблемы ?

2
  • Добавьте, пожалуйста, в вопрос пример кода, демонстрирующий данную проблему.
    – VenZell
    7 мая 2015 в 7:55
  • К сожалению сейчас не успею это сделать. Но в ближайшее время попробую оформить несколько своих вариантов и показать Вам через jsfiddle.net
    – Nepster
    7 мая 2015 в 9:41

1 ответ 1

1

Я бы рекомендовал Вам сделать адаптивный дизайн... При котором вверх остается закрепленным, а боковые панели уходят в стороны, сделать можно, например, этой библиотекой: http://www.berriart.com/sidr/ Сам пользуюсь недолго, но пока особых нареканий не было. Соответственно для телефона уходят две панели, для планшета можно одну оставить. Также одна панель остается в том случае, как только появляется горизонтальный скролл. Можно сделать чтобы панели открывались по жесту. Кстати, вместе с ней использую: http://simianstudios.com/portamento/ быть может Вам пригодиться. Второй вариант, это на мобильных устройствах задать <meta name="viewport" content="width=500"> Где 500, это ширина, при который не будет горизонтального скрола. Точно не помню, но по-моему в этом случае, при увеличении, все блоки останутся на месте и ничего ехать не будет.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.