web-dev-qa-db-ja.com

固定DIV要素の下にコンテンツを表示するにはどうすればよいですか？

私の意図は、ユーザーがスクロールしてもページの上部に残るメニューをページの上部に作成することですページの上部にスクロールする必要のないメッセージの操作）。

また、上記のメニューの下のコンテンツをその下に表示するように設定したいと思います-現時点では、そのメニューの後ろに表示されます。

私はこのようなものを目指しています：

+________________________+
|          MENU          | <--- Fixed menu - stays at top even when scrolling.
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+
|     CONTENT BEGINS     |
|          HERE          |
|                        |
|                        |
|                        |
|                        |
|                        |
|                        |
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+   <--- Bottom of page.

ユーザーが下にスクロールしても、移動せず、ページの上部にとどまるメニューを上部に配置したいと考えています。また、ユーザーがページの一番上にいるときにメインコンテンツがメニューの下から始まるようにしていますが、ユーザーが下にスクロールするときは、メニューがコンテンツの一番上にあるかどうかは関係ありません。

概要：

  • ページの上部に、スクロール時にユーザーを追跡する固定位置メニューを配置したいと思います。
  • ユーザーがページの上部にいる場合にのみ、コンテンツがメニューの下に表示される必要があります。
    • ユーザーが下にスクロールすると、メニューがコンテンツに重なる場合があります。

誰かがこれを達成する方法を説明できますか？

ありがとうございました。

更新：

CSSコード：

#floatingMenu{
clear: both;
position: fixed;
width: 85%;
background-color: #78AB46;
top: 5px;
}

HTMLコード：

<div id="floatingMenu">
    <a href="http://www.google.com">Test 1</a>
    <a href="http://www.google.com">Test 2</a>
    <a href="http://www.google.com">Test 3</a>
</div>

現時点では、containerdiv内にメニューを配置することで、ページの上部に表示されるメニューを中央に配置できます。ただし、コンテンツはメニューの背後にあります。 clear: both;を設定しましたが、これは役に立ちませんでした。

cssmenu
46
MusTheDataGuy

必要なのは、余分なスペーシングdivです（あなたの質問を理解している限り）。

このdivはメニューとコンテンツの間に配置され、メニューdivと同じ高さになり、パディングが含まれます。

HTML

<div id="fixed-menu">
    Navigation options or whatever.
</div>
<div class="spacer">
    &nbsp;
</div>
<div id="content">
    Content.
</div>

CSS

#fixed-menu
{
    position: fixed;
    width: 100%;
    height: 75px;
    background-color: #f00;
    padding: 10px;
}

.spacer
{
    width: 100%;
    height: 95px;
}

私の例を参照してください here 。

これは、nav divが占めるスペースをオフセットすることで機能しますが、position: fixed;文書フローから除外されました。

この効果を実現する好ましい方法は、margin-top: 95px;/*your nav height*/コンテンツラッパー。

47
Kyle

メニューの高さが可変である場合（応答性のため、または動的に読み込まれるため）、上マージンを固定divの終了位置に設定できます。例えば：

CSS

.fixed-header {
    width: 100%;
    margin: 0 auto;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 999;
}

Javascript

$(document).ready(function() {
    var contentPlacement = $('#header').position().top + $('#header').height();
    $('#content').css('margin-top',contentPlacement);
});

HTML

...
<div id="header" class="fixed-header"></div>
<div id="content">...</div>
...

ここにフィドル（ https://jsfiddle.net/632k9xkv/5/ ）があります。これは、これを有用なサンプルにすることを目的として、固定navメニューとヘッダーの両方でこれを少し超えています。

14
grdevphl

これに苦労し、「ハッカー」ソリューションのいくつかを嫌っていたので、これが便利でクリーンであることがわかりました。

#floatingMenu{
  position: sticky;
  top: 0;
}
10
ahanusa

私はこの問題を抱えていましたが、これが私の解決策でした：

#floatingMenu + * {
    margin-top: 35px;
}

FloatingMenuの高さを調整します。後続のdivであることが確実でない場合は、divではなく*を使用できます。これはすべて有効なCSS2です。

5
Danimal

メニューの内容を別のdivでラップします。

<div id="floatingMenu">
    <div>
        <a href="http://www.google.com">Test 1</a>
        <a href="http://www.google.com">Test 2</a>
        <a href="http://www.google.com">Test 3</a>
    </div>
</div>

そしてCSS：

#floatingMenu {
    clear: both;
    position: fixed;
    width: 100%;
    height: 30px;
    background-color: #78AB46;
    top: 5px;
}

#floatingMenu > div {
    margin: auto;
    text-align: center;
}

また、メニューの下のページについては、同様にパディングトップを指定できます。

#content {
    padding-top: 35px; /* top 5px plus height 30px */
}
2
Erick Petrucelli

私は grdevphlのJavascriptの答え が好きでしたが、私自身のユースケースでは、計算でheight()を使用すると、パディングが考慮されないため、まだ少し重複していることがわかりました。同じ問題が発生した場合は、代わりにouterHeight()を試して、パディングとボーダーを補正してください。

$(document).ready(function() {
    var contentPlacement = $('#header').position().top + $('#header').outerHeight();
    $('#content').css('margin-top',contentPlacement);
});
2
Ty Mick

ナビゲーションの下のdivにパディングトップを追加しました。それが役に立てば幸い。私はこれに新しいです。 C：

#nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: url(../css/patterns/black_denim.png);
    z-index: 9999;
}

#container {
    display: block;
    padding: 6em 0 3em;
}
2
user4852538

メインディビジョンを固定メニューの下に移動するためにマージントップまたはパディングトップを使用することを提案している人には、完全にテストしているようには見えません。

マージンまたはパディングを設定すると、ページとともにスクロールし、行が失われます-試してみてください このページ

よさそうですね？表示されている一番下の行でWordを強調表示し、ページダウンを押します-強調表示されたWordのある行と他のいくつかの行は、固定された区分の下でスクロールされます。

マージン上部またはパディング上部は、メイン分割を固定分割の下に配置しますが、ページを下に移動するか、スクロールバーをクリックしてページの1つのビューポートの高さをスクロールすると、すべての面が平らになります。

ページアップすると、ビューポートの下部から行が「落ちる」という同じ問題があります。

この問題の実際の修正はありますか？

私は物事を配置する方法を知っています-マージン、パディングなどの基本を知っていればかなり簡単です-しかし、スクロールするときに行が失われないようにするにはどうすればよいですか？

上部に固定された分割がある適切に機能するページであると主張されるものの多くの例を見てきましたが、それらは機能しません！それらはすべて、スクロールする問題があります。

いくつかのページが機能しているように見えますが、固定区分を高くすると行が失われます。私は彼らが働くように見える理由を知っていると信じています。

完全に通常の（派手な書式設定なし）ページのテキストがどのようにスクロールするかを考えてください。上にスクロールすると一番下の行が表示されますか、それとも次の行が表示されますか？一番下の行はビューポートの上部からスクロールしましたか？

回答-一番下の行がスクロールして一番上の行になります。

動作しているように見える固定メニューページは、実際には動作しません。それらをスクロールすると、一番下の行がビューポートからスクロールされますが、次の行が表示されるため、固定分割が機能しているように見えます-しかし、私たちはよく知っていますよね？

固定区分が1行のテキストの高さよりも高くなると、それらは失敗し、行が失われます。

私が実際に適切に動作しているのを見た唯一のページは、yahooなどのサイトにあり、取得するページの多くのCSS、HTML、およびJavaScriptを掘り下げる時間も傾向もありません問題の中心に。

だから-そのページに移動して、スクロールの問題を修正する変更（要素の「検査」とCSSルールの変更）ができるかどうかを確認してください。

可能であれば、戻って発見を世界と共有してください。

私のページは、最上部のディビジョンを修正し、中央（およびメインディビジョン）を最大幅に制限するために必要なものを調べるのに適した場所です。それはあなたの何人かを助けるかもしれないが、すみません、私はスクロール問題の修正を持っていません

修正区分の高さで再生します-1行だけが表示されるように十分短くし、スクロールして再生します。次に、2行、次に3行の大きさにし、スクロールして再生します。問題が表示されます。

ここにページがあります 動作するはずですが、動作しません-最後のコメントを読んでください-彼らは異なる方法で問題を説明していますが、それは同じ問題です

Chromeでページをもう一度テストしましたが、かなり満足に動作するようです。FFでは問題が存在します。まだIEを試していません。

だから-FFで何が違うのですか？

これはcNetのページです chromeおよびff-で動作するので、何をしているのですか？

Chromeでさらにテストすると、スクロールすると一番下の行を完全に表示できないことがわかります。一番下にあった行の一部だけがスクロール時に表示されます。

2
BobN
#nav{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    margin: 0 auto;
    z-index: 9999;
    background-color: white;
}
1
Hassan Sarwar

JQueryを使用して応答する方法を次に示します。

 $(window).resize(function () {
      $('#YourRelativeDiv').css('margin-top', $('#YourFixedDiv').height());
 });
0
David Elswick

あなたはそれを試してみてください Pen それがあなたを助け、さらに固定ナビゲーションを使用するためのより良い機能を与えることを願っています

1 .clear:both; clearを使用する必要はありません

0
shaz3e