3

私は CSS3 と HTML5 のいくつかを学ぼうとしていますが、何かと少し混乱しています。今のところ、ページの上部に固定されたナビゲーション バーがあり、ページと共にスクロールするページを作成したいと考えています。

実際には、ナビゲーションバーは上部に固定され、ページとともにスクロールしますが、コンテンツはページの上部から始まります。つまり、コンテンツはナビゲーションバーの後ろから始まります。これは望ましくありません。

以下の希望デザインを参照してください。 募集デザイン

現在のデザイン: 現在のデザイン

以下は私のCSSです：

body{
    left: 0;
    top: 0;
    margin: 0px;
    padding: 0px;
}

header.topbar{
    background-color: #f8f6f6;
    position: fixed;
    width: 100%;
    height: 100px;
    opacity: 0.7;
    z-index: 1;
    top: 0;
    left: 0;
}

#content{
    z-index: 0;
    position: absolute;
}

そして私のHTML：

<!DOCTYPE HTML>
<html>
<head>
    <title> Test </title>
    <meta name="description" content="página de teste.">
    <link rel="stylesheet" type="text/css" href="stylesheet/style.css"/>
</head>
<body>

        <header class="topbar">
            test
        </header>

        <p>another test</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/>
        <p>again</p>

</body>

それで、私の問題を解決するにはどうすればよいですか？CSS を使って答えてみてください。現時点では JavaScript/jQuery を学びたくありません。

ありがとう！

4

5 に答える 5

1

「固定」または「絶対」位置の要素はページ内のスペースを占有しないため、可能な回避策は、コンテンツにマージンまたはパディングを追加することです。

<article id='content'>
    <p>another test</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/>        <br/><br/><br/><br/><br/><br/><br/>
    <p>again</p>
<article>


#content{
    margin-top: 100px;
}

http://jsfiddle.net/KUpnA/

于 2013-08-27T13:26:47.780 に答える
1

コンテンツに余裕を持たせます。余白の値は、ヘッダー (スティッキー ヘッダー) の高さ + 20px にする必要があります。

于 2013-08-28T08:54:38.680 に答える
1

使用する必要があるのはposition: fixed;

/* Tell body leave a 40px gap at the top for the navigation when the page is scrolled to the top */
body { position: relative; padding-top: 40px; }
/* Tell the nav to stick to the top left */
nav { position: fixed; top: 0; left: 0; }

http://jsfiddle.net/ninty9notout/8J7UM/

于 2013-08-27T13:17:25.883 に答える