V-Scrollable content with fixed header, both h-scrolling + fixed sidebars?

202 views Asked by At

I'm trying to find a suitable layout for Snap.js:

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

The issues with the recommended HTML / CSS are:

  1. Header (navigation bar) is not sticky
  2. Address bar does not hide in Chrome for Android as you scroll the main content down
  3. Fixed sidebars don't move in sync with address bar
  4. In my below fiddle, the main content is v-scrollable a little (?!) while it's moving to the right

  1. I would like to have the header fixed, but it still needs to scroll vertically along with the content area. CSS doesn't seem to support this, so I tried a scripted solution:

    animate();
    
    function animate() {
        requestAnimFrame(animate);
        draw();
    }
    
    function draw(){
        var pos = content.offset();
        nav.css('transform', 'translateX('+ pos.left +'px)');
    }
    

    http://jsfiddle.net/HFjU6/2533/

    Please tell me other options if there are any, I'm afraid of a broken UI if JS is disabled.


  1. To make the address bar go away (a.k.a. "full-screen mode"), I had to make the content position: static;.

    Downside: the v-scrollbar shows at the right window border, not at the right side of the content area. Is there another way?


  1. The sidebars with position: fixed are independently scrollable from the main content if they contain overly tall content.

    The problem: they don't move together with the address bar, but are re-positioned once the address bar is fully gone (standard behavior in Chrome for Android is to move the content in sync with the address bar, which sticks to the swipe input for a nice transition).

    It works for position: absolute;, but that will make my sidebars scroll with the main content and you will see body background below 100% of the original height.


  1. I can scroll the main content area slightly to the left while it is translated to the right and breaks the layout (may only apply to touch devices, but possibly to desktops too if you use the middle mouse button for panning). Why is this happening?
0

There are 0 answers