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 で実行できることに対して、不要なオーバーヘッドと複雑さが追加されます。

JQuery ソリューション

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

このように1つの余分な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 に答える