CSS, fixed header in jquery horizontal align

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

---

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.

---

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/

链接地址: http://www.djcxy.com/p/75806.html

上一篇: 当前屏幕位置中心的绝对位置

下一篇: CSS，修正了jquery水平对齐的标题