Question

I’ve looked everywhere and so far have not found a non-jQuery js to handle this. I would like to avoid using a library for just this one simple task.

I would like to fix three navigation divs (“#header”, “#tabs” and “#footer”) to viewport left (or alternatively, to the x position of a div “#helper” with “position: fixed; left: 0; top: 0;”) — but not fix y. They can not be vertically fixed.

I’ve created a working js that forces the divs to reposition based on scrolling, but it’s not smooth in the real page (too many dynamic and graphic elements) – I’d like it to either animate smoothly, or mimic fixed-left and not appear to reposition at all.

Anyone who can give pointers or a quick script, or review and modify the script I have made? I’ve noticed people tend to ask why an obvious solution is not used instead of answering the question… I will be glad to answer, but would prefer help with the actual problem.

Here is a jsFiddle with the problem: http://jsfiddle.net/BMZvt/6/

Thank you for any help!

Answer 1

This is for people who view this post – I wound up going with the solution I initially put together in the jsFiddle that used a simple javascript to mimic fixed x.

The javascript in the first answer was hefty and wound up buggy, and the second answer sounded good but did not work in practice. So, I’m recommending the javascript from the jsFiddle (below) as the best answer to fixed x and fluid y without a javascript library. It’s not perfect and has a minimal delay but is the best answer I’ve found.

function fixLeft() {

            function getScrollX() {
                var x = 0, y = 0;
                if( typeof( window.pageYOffset ) == 'number' ) {
                    x = window.pageXOffset;
                } else if( document.body && ( document.body.scrollLeft) ) {
                    x = document.body.scrollLeft;
                } else if( document.documentElement && ( document.documentElement.scrollLeft) ) {
                    x = document.documentElement.scrollLeft;
                }
                return [x];
            }

            var x = getScrollX();
            var x = x[0];

        // have to get and add horizontal scroll position px
        document.getElementById('header').style.left = x + "px";
        document.getElementById('tabs').style.left = x + "px";
        document.getElementById('footer').style.left = x + "px";
    }

    window.onscroll = fixLeft;