V-прокручиваемый контент с фиксированным заголовком, обе h-scrolling + фиксированные боковые панели?

Я пытаюсь найти подходящий макет для Snap.js:

http://jakiestfu.github.io/Snap.js/demo/apps/default.html

Проблемы с рекомендуемым HTML / CSS:

  1. Заголовок (панель навигации) не липкий
  2. Адресная строка не скрывается в Chrome для Android при прокрутке основного содержимого вниз
  3. Фиксированные боковые панели не движутся синхронно с адресной строкой
  4. В моей приведенной ниже скрипке основной контент немного v-прокручиваемый (?!), Когда он движется вправо

  1. Я хотел бы исправить заголовок, но он все еще должен прокручиваться вертикально вместе с областью содержимого. Кажется, что 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 отключен.


  1. Чтобы адресная строка исчезла ("полноэкранный режим"), мне пришлось сделать контент position: static;,

    Недостаток: полоса прокрутки v отображается в правой части окна, а не в правой части области содержимого. Есть ли другой способ?


  1. Боковые панели с position: fixed независимо прокручиваются из основного контента, если они содержат слишком высокий контент.

    Проблема: они не перемещаются вместе с адресной строкой, но перемещаются после полного исчезновения адресной строки (стандартное поведение в Chrome для Android состоит в том, чтобы перемещать контент синхронно с адресной строкой, которая придерживается прокрутки вход для приятного перехода).

    Это работает для position: absolute;, но это заставит мои боковые панели прокручиваться с основным контентом, и вы увидите фон тела ниже 100% от первоначальной высоты.


  1. Я могу прокрутить основную область содержимого немного влево, пока она переводится вправо и нарушает макет (может применяться только к сенсорным устройствам, но, возможно, и к рабочим столам, если вы используете среднюю кнопку мыши для панорамирования). Почему это происходит?

0 ответов

Другие вопросы по тегам