web-dev-qa-db-ja.com

HTML / CSSページの上部にヘッダーとナビゲーションをスティッキーにする

現在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;
}

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

htmlcsspositionsticky
3
Loric-

navバーの位置を修正していません。使ってみてください

#nav
 {
 background-color:#262626;
 width:100%;
 height:50px;
 box-shadow: 0px 1px 50px #5E5E5E;
 position:fixed;
 top:0px;
}

または、起動に Twitter Bootstrap を使用できます。

ここ と ここ を見てください。

11
Trying Tobemyself

私自身もこの問題を調査してきました。私はかなりの数の解決策を見てきましたが、それぞれに問題があり、多くの場合、いくつかのマジックナンバーが関係していました。

そこで、さまざまなソースからのベストプラクティスを使用して、解決策を考え出しました。

ここで具体的に達成したかったのは、メインコンテンツを緑色の領域内のフッターとヘッダーの間でスクロールさせることでした。

これがソースコードを使った作業デモです：

html, body {
    height:100%;
    margin:0;
    padding:0;
}
header {
    height: 4em;
    background-color:red;
    position:relative;
    z-index:1;
}
.content {
    background:white;
    position:absolute;
    top:5em;
    bottom:5em;
    overflow:auto;
}
.contentinner {

}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background:green;
    position:relative;
    overflow:auto;
}
footer {
    height: 2em;
    position:relative;
    z-index:1;
    background-color:yellow;
}
<header>Header Strip</header>
<div class="container">
    <div class="content">
    <div class="contentinner">
            <p>THIS IS WHERE THE CONTENT GOES</p>
            <p><a href="http://traceyspencer.blogspot.co.uk/2012/04/css-sticky-header-and-footer-with.html" target="_blank">CLICK HERE for an explanation of this page</a>.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lectus nibh, bibendum sit amet porttitor ut, pretium id lectus. Nulla facilisis erat vel nisi malesuada consequat. Phasellus ac porta enim. Aliquam feugiat, lacus ornare fringilla sodales, neque arcu ultricies lorem, vel rhoncus lacus purus eu est. Proin sodales suscipit elit, ut consectetur erat faucibus a. Integer gravida, odio sed pellentesque cursus, lorem mi gravida nisi, vel consequat leo turpis vel leo. Vestibulum ac purus quam. Donec imperdiet varius mollis. Aliquam adipiscing magna vitae ipsum aliquam blandit. Morbi lectus purus, tempor vitae laoreet eu, sollicitudin sit amet magna.</p>
            <p>Donec eu vulputate libero. Praesent justo tortor, lobortis sed eleifend nec, posuere a tellus. Sed at purus vitae diam molestie dictum sed quis dolor. Nam pulvinar mi neque, fermentum vehicula arcu. Aenean fringilla, dui non blandit luctus, ligula leo aliquam justo, ac fermentum felis nisi ut mauris. Duis tristique lacinia molestie. In quam sem, tristique non aliquam id, luctus vitae tellus. Cras a mollis sapien.</p>
            <p>Donec vel justo vel sem consectetur tempor nec ut est. Nullam fermentum fringilla ultricies. Donec hendrerit condimentum vestibulum. Nulla bibendum urna congue augue semper vitae ultricies dui egestas. Fusce quis risus nibh, nec sagittis ipsum. Sed metus massa, adipiscing quis pharetra ac, sagittis non tellus. Praesent at dolor a est vehicula porttitor. Aenean nec sodales felis.</p>
            <p>Vestibulum ut ornare elit. Quisque nisl sem, scelerisque vitae egestas vel, interdum eget augue. Etiam dapibus pharetra ligula, eget imperdiet mi blandit sit amet. Suspendisse potenti. Cras auctor pulvinar augue nec ultrices. Integer congue cursus est, vitae pulvinar quam mattis ut. Aliquam quis dui tincidunt ipsum tristique vulputate vel vitae mauris. Vivamus facilisis rutrum justo, ac sagittis est dapibus sit amet. Sed tortor libero, congue sed egestas et, tempus in urna. Nunc tellus metus, condimentum sed luctus ut, eleifend ac mi. Praesent et tincidunt justo. Suspendisse facilisis elit nec dui sodales sit amet semper mi elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            <p>Morbi nec ante at sapien semper varius. Etiam a felis in erat vehicula vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel magna eu enim cursus mollis. Donec orci tellus, feugiat ut vulputate in, congue eu diam. Nulla pulvinar hendrerit elit in ornare. Praesent malesuada facilisis convallis. Vestibulum vel sem vel mauris dapibus tempor nec quis erat. Aenean mattis ultricies mauris et rutrum. Mauris ac justo eros, et semper mi.</p>
            <p>Donec eu vulputate libero. Praesent justo tortor, lobortis sed eleifend nec, posuere a tellus. Sed at purus vitae diam molestie dictum sed quis dolor. Nam pulvinar mi neque, fermentum vehicula arcu. Aenean fringilla, dui non blandit luctus, ligula leo aliquam justo, ac fermentum felis nisi ut mauris. Duis tristique lacinia molestie. In quam sem, tristique non aliquam id, luctus vitae tellus. Cras a mollis sapien.</p>
            <p>Donec vel justo vel sem consectetur tempor nec ut est. Nullam fermentum fringilla ultricies. Donec hendrerit condimentum vestibulum. Nulla bibendum urna congue augue semper vitae ultricies dui egestas. Fusce quis risus nibh, nec sagittis ipsum. Sed metus massa, adipiscing quis pharetra ac, sagittis non tellus. Praesent at dolor a est vehicula porttitor. Aenean nec sodales felis.</p>
            <p>Vestibulum ut ornare elit. Quisque nisl sem, scelerisque vitae egestas vel, interdum eget augue. Etiam dapibus pharetra ligula, eget imperdiet mi blandit sit amet. Suspendisse potenti. Cras auctor pulvinar augue nec ultrices. Integer congue cursus est, vitae pulvinar quam mattis ut. Aliquam quis dui tincidunt ipsum tristique vulputate vel vitae mauris. Vivamus facilisis rutrum justo, ac sagittis est dapibus sit amet. Sed tortor libero, congue sed egestas et, tempus in urna. Nunc tellus metus, condimentum sed luctus ut, eleifend ac mi. Praesent et tincidunt justo. Suspendisse facilisis elit nec dui sodales sit amet semper mi elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            <p>Morbi nec ante at sapien semper varius. Etiam a felis in erat vehicula vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel magna eu enim cursus mollis. Donec orci tellus, feugiat ut vulputate in, congue eu diam. Nulla pulvinar hendrerit elit in ornare. Praesent malesuada facilisis convallis. Vestibulum vel sem vel mauris dapibus tempor nec quis erat. Aenean mattis ultricies mauris et rutrum. Mauris ac justo eros, et semper mi.</p></div>
    </div>
</div>
<footer>This is the footer</footer>
8
husayt

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

0
Sahib Singh