css - Position fixed menu to top

Question

I know how to use position:fixed; but I want, if the page scrolls over it, that it's on the top and on normal state lower.

.menu {
    height: 30px;
    width: 100%;
    border-bottom: 1px solid black;
    position: fixed;
    top: 0px;
}

Answer 1

If I understand correctly, you want to make a menu fixed after it's scrolled past? If that's the case, see this question.

If that doesn't work for you, consider using code like this, assuming jQuery (actually Sprint but it's about the same for both):

var navigation = $('nav').item(0);
var navigationY = navigation.element.offsetTop;
var navClone = navigation.clone();

$(window).bind('scroll', function() {
    var scrollY = (window.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop) >>> 0;
    if(scrollY > navigationY) {
        if(!navClone.element.parentNode || navClone.element.parentNode.nodeType !== 1) {
            navigation.after(navClone);
            navigation.addClass('fixed');
        }
    } else if(navClone.element.parentNode) {
        navClone.remove();
        navigation.removeClass('fixed');
    }
});

which I used in a recent project, so just change $('nav') at the top to whatever you need to select your element, e.g. $('.menu').