V-прокручиваемый контент с фиксированным заголовком, обе h-scrolling + фиксированные боковые панели?
Я пытаюсь найти подходящий макет для Snap.js:
http://jakiestfu.github.io/Snap.js/demo/apps/default.html
Проблемы с рекомендуемым HTML / CSS:
- Заголовок (панель навигации) не липкий
- Адресная строка не скрывается в Chrome для Android при прокрутке основного содержимого вниз
- Фиксированные боковые панели не движутся синхронно с адресной строкой
- В моей приведенной ниже скрипке основной контент немного v-прокручиваемый (?!), Когда он движется вправо
Я хотел бы исправить заголовок, но он все еще должен прокручиваться вертикально вместе с областью содержимого. Кажется, что CSS не поддерживает это, поэтому я попробовал сценарий решения:
animate(); function animate() { requestAnimFrame(animate); draw(); } function draw(){ var pos = content.offset(); nav.css('transform', 'translateX('+ pos.left +'px)'); }
http://jsfiddle.net/HFjU6/2533/
Скажите, пожалуйста, другие варианты, если таковые имеются, я боюсь сломанного интерфейса, если JS отключен.
Чтобы адресная строка исчезла ("полноэкранный режим"), мне пришлось сделать контент
position: static;
,Недостаток: полоса прокрутки v отображается в правой части окна, а не в правой части области содержимого. Есть ли другой способ?
Боковые панели с
position: fixed
независимо прокручиваются из основного контента, если они содержат слишком высокий контент.Проблема: они не перемещаются вместе с адресной строкой, но перемещаются после полного исчезновения адресной строки (стандартное поведение в Chrome для Android состоит в том, чтобы перемещать контент синхронно с адресной строкой, которая придерживается прокрутки вход для приятного перехода).
Это работает для
position: absolute;
, но это заставит мои боковые панели прокручиваться с основным контентом, и вы увидите фон тела ниже 100% от первоначальной высоты.
- Я могу прокрутить основную область содержимого немного влево, пока она переводится вправо и нарушает макет (может применяться только к сенсорным устройствам, но, возможно, и к рабочим столам, если вы используете среднюю кнопку мыши для панорамирования). Почему это происходит?