web-dev-qa-db-ja.com

DIVを常に画面に表示できますが、常に固定位置に表示することはできませんか？

私のウェブサイトにはマスターフォームがあり、マスターフォーム内のコンテンツ領域の上部にdivをドッキングしたいと考えています。このdivは、スクロール位置に関わらず常に表示されている必要があります。これは可能ですか？

画像で説明するとわかりやすいでしょう。

enter image description here

csshtmlcss-float
19
Rachel

sample をコメントとして投稿したので、これに対する完全な回答を書き出します。

マークアップはかなり単純明快ですが、セクションごとにいくつかの重要な注意事項があります。

HTML

<div id="page">
    <div id="header">
        <div id="header-inner"> <!-- Note #1 -->
            <img src="http://placehold.it/300x100" />
        </div>
    </div>
    <div id="content">
        <!-- Some Content Here -->
    </div>
</div>

CSS

#page {
    padding: 100px;
    width: 300px;
}

#header,
#header-inner { /* Note #1 */
    height: 100px;
    width: 300px;
}

.scrolling { /* Note #2 */
    position: fixed;
    top: 0;
}

JavaScript

//jQuery used for simplicity
$(window).scroll(function(){
  $('#header-inner').toggleClass('scrolling', $(window).scrollTop() > $('#header').offset().top);

  //can be rewritten long form as:
  var scrollPosition, headerOffset, isScrolling;
  scrollPosition = $(window).scrollTop();
  headerOffset = $('#header').offset().top;
  isScrolling = scrollPosition > headerOffset;
  $('#header-inner').toggleClass('scrolling', isScrolling);
});

ノート＃1

スクロールヘッダーはposition: fixedを使用してページの上部に添付されますが、このスタイルではコンテンツフローからコンテンツが削除され、コンテナーが元の高さを維持しない限りコンテンツがジャンプします。

注2

スタイルはCSSに属しますが、一部の要素を元の位置に正しく合わせることが難しい場合があります。 JavaScriptを介してleftまたはright cssプロパティを動的に設定する必要がある場合があります。

17
zzzzBov

JQueryなどが必要になります。私のフィドルを参照してください here

編集

jQuery関数、ここで.formはコンテンツdivであり、.bannerはドッキングされているdivです

$(window).scroll(function() {
    t = $('.form').offset();
    t = t.top;

    s = $(window).scrollTop();

    d = t-s;

    if (d < 0) {
        $('.banner').addClass('fixed');
        $('.banner').addClass('paddingTop');
    } else {
        $('.banner').removeClass('fixed');
        $('.banner').removeClass('paddingTop');
    }
});

.fixed {
    position:fixed;
    top:0px;
}
.paddingTop{
    padding-top:110px;
}
8
ptriek

新しいフィドルを作りました。 DIVはページ内の任意の場所に配置でき、スクロールしても表示されます。

http://jsfiddle.net/mM4Df/

<div id="mydiv">
  fixed div
</div>

<div class="ghost">
  fixed div
</div>

CSS：

#mydiv { position: fixed;  background-color:Green; float:left; width:100%}
.ghost{opacity: 0}

おそらく「ゴースト」を使用するよりも良い解決策がありますが、どちらがいいのかわかりません。

3
Paolo

2018年7月の時点で、この問題を再検討するときです。 position: stickyはあなたのような問題のために正確に導入され、 まともなブラウザのサポート を持っています。

それはこのように動作します：

<div style="position: sticky; top: 0;"> Header </div>

ここで、topは、スクロールしたときにdivが留まるビューポートの上部までの距離です。 topの指定は必須です。bottom、left、rightなどの他のオプションは現在機能していません not 。

スティッキーdivは、スクロールした場合を除いて、通常のdivと同じように動作し、ブラウザーの上部に固定されます。

ここに jsfiddle があります。

3
npas

ヘッダーdivの上部の位置（画面の上部まで）が最初に100pxであると仮定すると、次のようにできます。ウィンドウのスクロール上部が100pxを超える場合は、ヘッダーdivを上部の0pxで位置を固定するように設定します。ウィンドウのスクロール上部が100px未満の場合、ヘッダーdivの位置をデフォルトのレイアウトに設定します。 jqueryでは、次のようになります。

$(document).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $('div#header').css({ 
            "position" : 'fixed',
            "top" : 0 });
    } else {
        $('div#header').css({ "position" : 'relative', "top" : 0 });
    }
});

スクロールイベントで実装されます。

3
zuo

下にスクロールしたときに続くdivを探していると思います。この実装は、多くのサイトのショッピングカートで見られます。 http://kitchen.net-perspective.com/open-source/scroll-follow/ をご覧になることをお勧めします

別の良いリンクは： http://jqueryfordesigners.com/fixed-floating-elements/

いくつかの関連するスクロールの例のコレクション： http://webdesign14.com/30-tutorials-and-plugins-jquery-scroll/

0
jeff musk

CSSを使用して位置を修正します。

<div>のIDは「topdiv」です。

#topdiv {
    position: fixed;
    top: 0;
    left: 0
}

固定divはコンテンツの「上」に表示されるため、コンテンツのマージントップを設定する必要があることに注意してください。

#contentarea { margin-top: 35px; }

これをチェックしてください フィドル 。

0
Didier Ghys

このCSSを試すことができます。多分それはあなたが探しているものです：

    html, body{
        text-align:center;
        margin:0px;
        background:#ABCFFF;
        height:100%;
        }
    .header-cont {
        width:100%;
        position:fixed;
        top:0px;
    }
    #header {
        height:50px;
        background:#F0F0F0;
        border:1px solid #CCC;
        width: 100%;
        margin:auto;
    }
    .content-cont {
        width:100%;
        position:absolute; /* to place it somewhere on the screen */
        top:60px;
        bottom:60px; /* makes it lock to the bottom */
        overflow:auto;
    }
    #content {
        background:#F0F0F0;
        border:1px solid #CCC;
        width:960px;
        position:relative;  
        min-height:99.6%;
        height:auto;
        overflow: hidden;
        margin:auto;            
    }
    .footer-cont {
        width:100%;
        position:fixed;
        bottom:0px;
    }
    #footer {
        height:50px;
        background:#F0F0F0;
        border:1px solid #CCC;
        width: 100%;
        margin:auto;
    }
0
jose011385

あなたが探しているのは、2つのプロパティを持つヘッダーdivです：

  1. 通常は表示される場合、デフォルトの位置に留まります。
  2. 通常は表示されない場合、画面の上部に表示されます。

つまり、「max-top」のようなもの（cssプロパティとしては存在しません）。

これらすべてを実行したい場合は、JavaScriptを使用するのが最も簡単な方法です。お試しください this ;後で時間があれば、さらにコードを追加して更新します。

0
Chris

この変更例では、バナーdivはスクロール時に画面にとどまり、コンテナーdivにも残ります。コンテナーdivの下部が画面の上部に達すると、バナーdivが相対位置に戻り、コンテナーで上にスクロールします http://jsfiddle.net/SeeTS/198/

JQuery

$(window).scroll(function() {
t = $('.form').offset();
t = t.top;
s = $(window).scrollTop();
d = t-s;
b = $('.banner').height();
f = $('.form').height();

if (d < 5) {
    if(d < -(f-b)-15)
        {
        $('.banner').addClass('bottom');
        $('.banner').removeClass('fixed');
        }
    else {
        $('.banner').addClass('fixed');
        $('.banner').removeClass('bottom');
    }
}
else {
    $('.banner').removeClass('fixed');

}
});

CSS

    .form {
    position:relative;
    width:480px;
    margin: 100px auto;
    padding:10px;
}
p {
  border:2px dotted #000;
}
.banner {
    border-radius:8px;
    background:#660000;
    height:100px;
    width:60px;
}
.fixed{
    position:fixed;
    top:5px;
}
.bottom {
  position:absolute;
  bottom:0px;
}

HTML

<table class="form" id="form">
  <tr>
    <td valign="top" width="70px">
      <div class="banner"></div>
    </td>
    <td>
    <p>Cum sociis natoque penatibus...</p>
    </td>
  </tr>
</table>
<div style="position:relative;height:500px;">
</div>
0
Grady N.