0

我有 jquery 的问题，我制作了一个固定的标题，但是当它向下滚动时，它没有水平对齐。在 CSS 中，我把 margin-left:auto;margin-right:auto; 它做对了，但是当我向下滚动时，标题会向左侧移动。

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

非常感谢。

这是我的 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

4

2 回答 2

1

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

您只需要 CSS（点击查看实时示例）：

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

全屏版。

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

固定定位默认对齐到最左边和最上面，因此将固定元素居中需要一点按摩。

但正如您所见，这是一个 CSS 解决方案，所以除非您需要使用 JQuery，否则我会避免使用它。它为可以在纯 CSS 中完成的事情增加了不必要的开销和复杂性。

查询解决方案

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

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

您不能auto margin与fixed定位一起使用，您需要使用我建议的边距修复。

于 2013-07-08T18:01:49.560 回答
0

你可以像这样添加一个额外的 div 

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

有了这个 CSS 

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

所以你可以有 margin:0 auto; 工作
http://jsfiddle.net/24ba7/6/

于 2013-07-08T18:11:07.090 回答