CSS, fixed header in jquery horizontal align

Question

I have a problem with jquery, I made a fixed header but, when it scrolls down it's not aligned horizontally. In CSS, i put margin-left:auto;margin-right:auto; and it doing it right, but when i scroll down the header is going to the left side.

I don't know if is the problem in jquery or in CSS.

Thanks a lot.

Here's my jQuery:

$(function () {
    var HeaderTop = $('#header').offset().top;
    $(window).scroll(function () {
        if ($(window).scrollTop() > HeaderTop) {
            $('#header').css({
                position: 'fixed',
                top: '0px',
                marginLeft: 'auto',
                marginRight: 'auto'
            });
        } else {
            $('#header').css({
                position: 'relative',
                top: '0px'
            });
        }
    });
});

My CSS:

    html, body
    {
        height:100%;
    }
    body
    {
        margin: 0;
        padding: 0;
    } 
    #header
    {
        width:900px;
        height:100px;
        background-color:#FFF;
        margin-left:auto;
        margin-right:auto;
        border-top:1px;
        border-top-color:#D2D2D2;
        border-top-style:solid;
        border-bottom:1px;
        border-bottom-color:#D2D2D2;
        border-bottom-style:solid;
    }
    header
    {
        background-color:#FFF;
        width:900px;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
    }
    .content
    {
        width:900px;
        margin-left:auto;
        margin-right:auto;
    }
    #header ul
    {
        list-style:none;
    }
    #header ul li
    {
        display:inline;
        padding:10px;
    }

My HTML:

    <header>
    <img src="darkness.png" height="100" />
    </header>
    <div id="header">
    <ul>
    <li>Home</li><li>About</li>
    </ul>
    </div>
    <div class="content">
    </div>

jsFiddle Demo: http://jsfiddle.net/24ba7

Here is a JSFiddle of the code: http://jsfiddle.net/24ba7/ – Hanna Jul 08 '13 at 17:55 — Hanna, Jul 08 '13 at 17:55

score 1 · Accepted Answer · edited May 23 '17 at 12:29

You don't need to even use JQuery for this.

You just need CSS (click for live example):

 #header {
        position:fixed;
        width:900px;
        height:100px;
        left: 50%;
        margin-left: -450px;
    }

Fullscreen version.

To explain this a bit, the negative margin is half of the width that you defined, because elements center on the page based on their top-left most point, so we compensate for that by moving it back half of the way.

Fixed positioning defaults to being aligned to as far left and as far top as it will go, so centering a fixed element requires a little massaging.

But as you see this is a CSS solution, so unless you need to use JQuery, I would avoid it. It adds unnecessary overhead and complexity for something that can be done in pure CSS.

JQUERY SOLUTION

http://jsfiddle.net/24ba7/7/

    if ($(window).scrollTop() > HeaderTop) {
        $('#header').css({
            position: 'fixed',
            top: '0px',
            left:'50%',
            marginLeft: '-450px'
        });

You can't use auto margin with fixed positioning, you need to use the margin fix that I suggested.

I don't want something like it, i want a fixed header when i scroll down the page, something like it: [JSFiddle](http://jsfiddle.net/r8CWD/embedded/result/). But the header is going to the left — Darkness, Jul 08 '13 at 18:14
No problem. Working with fixed positioning can be tricky sometimes. — Hanna, Jul 08 '13 at 18:27

score 0 · Answer 2 · answered Jul 08 '13 at 18:11

you can add one extra div like this

<div id="wrapp">
    <div id="header">
        <ul>
            <li>Home</li>
            <li>About</li>
        </ul>
    </div>
</div>

with this css

#wrapp{
    width:100%;
    position:fixed;
    top:0px;
}

so you can have margin:0 auto; working
http://jsfiddle.net/24ba7/6/

CSS, fixed header in jquery horizontal align

2 Answers2

Linked