Fixing tabs to the top of the page, but underneath the header

Question

I'm trying to figure out how to design a header for a website so that there are tabs placed underneath the header (that look like they're sticking out from under the header), that stay with the header as the page is scrolled down (and the header moves up), but when they reach the top of the page become fixed there so that they're always visible.

I know how to fix an element to the top of the page so that its always visible, but when the header is in the window, I want the tabs to appear below it, not at the top. When the header is off the page, the tabs will still be there.

What I need is a solution using CSS and/or JavaScript. Does anyone know of a way to do this?

Answer 1

I don't think you can do that with css only, as SLaks said. Even if there is some way of conditional statements or hacks I don't know of, I wouldn't do it because of mainly two reasons:

• It would certainly not work with all browsers.
• It certainly is not the appropiate choice (the language should match the problem).

Using javascript, I would suggest to use onScroll and scrollHeight to update the tabs css when they are at the top of the page.

Answer 2

See this SO question, and answers

Answer 3

You could look into jQuery UI which has a tabs plugin, and there are many examples for use of that you can find after s short search.

Answer 4

The basic approach is to position the element absolutely on page load but on scroll, change the positioning to fixed if supported, or move the element to the appropriate location.

<div id="fix" style="position:absolute;top:30px;">
My fixedish div
</div>

And some quick js (should be cleaned up to work cross-browser):

// register event handler
window.addEventListner("scroll", function(){
    var div = document.getElementById("fix");  
    if (document.body.scrollHeight > 30) {
        // fix it to the top
        div.style.position = "fixed";
        div.style.top = "0px";
    }
    else {
        // position it below the header
        div.style.position = "absolute";
        div.style.top = "30px";
    }
});

Answer 5

Remy Sharp, of Left Logic, and jQuery for Designers offers a tutorial on a similar-ish subject: fixed-floating-elements.

This emulates the shopping basket from the UK Apple store (click on a product to configure, and watch the summary/specification boxes as you scroll the page) covers pretty much everything you should need to know to adapt the technique to suit your own requirements.

Obviously, from the URL to the site, it does require (or, at least, makes use of) jQuery, rather than plain Javascript.