Question

Well I am working on an small website.

However I have problem with fixed position.

My header is 770px in width. It contain a couple of elements with it.

position: fixed; works really fine, but when I resize my website to another screen size, something like 640×480 the fixed element (header) cannot be fully visible in width.

I want it to be fixed for scrolling but I want it to be fully visible in width, if user is on smaller screen and cannot see it completely.

Here is an example on an wordpress theme.

http://dvl-den.net/

Same problem is with my small project. Try to open that website on 640×480 (resize browser) and you’ll see my problem.

Thanks in advance.

Answer 1

I don’t think there is a solution with CSS only properties. I’d try having position: absolute; on my CSS, and playing around JavaScript (my example requires jQuery) like:

jQuery(function($) { // document ready
    var $win = $(window),
        handler = function() {
            // try not to overload browser, creating a throttle
            var throttle,
                throttleFn = function() {
                    // this is what happens on window resize
                    $('#header').css({
                        top: $win.scrollTop()
                    });
                };
            return function() {
                clearTimeout(throttle);
                throttle = setTimeout(throttleFn, 100);
            };
    };
    $win.resize(handler());
});

It doesn’t work really “cool” in mobile, but it’s widely know there are mobile issues with fixed headers in web apps (different than native). If you need I can update with a JSFiddle example.

Check demo at: http://jsfiddle.net/qaKT7/ (you can play around with that 100 value to get a better experience, and also use .animate() instead of .css() to make it look fancier)