3

現在、Web プロジェクトに取り組んでいます。いつでも利用できるスティッキー パーツを自分の Web サイトに設定したいと考えています。さまざまなことを試しましたが、何も機能しませんでした。

私の構造は以下のようなものです

<body>
  <wrap>
    <header></header>
    <nav></nav>
    <container></container>
  </wrap>
  <footer></footer>
</body>

あなたがスキームを好むなら、それはこのリンクです: http://s21.postimg.org/79tp8wu5z/structure_page.png

そのため、ヘッダーのナビゲーションと背景 (本文の背景に適用されます) をページの上に固定したいと考えています。

固定の相対位置を使用する必要があることはわかっていますが、背景以外は何も機能しません。

これが私のcssです：

body {
  background: url(img/bg.jpg) no-repeat center center;
  background-attachment: fixed;
  background-position: top;
}

.wrap {
  width: 960px;
  margin: 0 auto;
}

#header {
  height: 121px;
  position: relative;
}

#footer {
  height: 40px;
  background-color: #146992;
  position: relative;
}

.container {
  position:relative;
}

#menu {
  position:relative;
  height: 45px;
}

ご協力いただきありがとうございます。

4

3 に答える 3

0

レスポンシブ Web サイトを作成する場合は、位置固定を使用しないでください。Webkit ブラウザーと iPhone & iPad で問題が発生するためです。個人的には、Page Scrollerを使用することをお勧めします。これは、クライアントのスクロールを簡単かつスムーズにするのに役立ちます。

于 2013-06-07T10:03:44.037 に答える