CSS，jQuery标题中的固定标题水平对齐 [英] CSS, fixed header in jquery horizontal align

问题描述

我在使用jquery时遇到问题，我做了一个固定的标头，但是当它向下滚动时，它没有水平对齐.在CSS中，我将margin-left:auto; margin-right:auto;并且它的操作正确，但是当我向下滚动时，标题将移至左侧.

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.

我不知道jquery还是CSS中的问题.

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

非常感谢.

这是我的jQuery:

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'
            });
        }
    });
});

我的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;
    }

我的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演示: http://jsfiddle.net/24ba7

推荐答案

您甚至不需要为此使用JQuery.

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

您只需要CSS(点击以获取实时示例):

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

全屏版本.

对此稍作解释，负边距是您定义的宽度的一半，因为元素在页面上的居中位置基于其最左上角的点，因此我们通过将元素向后移动一半来弥补这一点.

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.

但是您看到这是一个CSS解决方案，因此除非需要使用JQuery，否则我将避免使用它.对于纯CSS可以完成的事情，它增加了不必要的开销和复杂性.

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解决方案

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

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

不能在fixed定位中使用auto margin，需要使用我建议的页边距修正.

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

这篇关于CSS，jQuery标题中的固定标题水平对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！