web-dev-qa-db-ja.com

ブートストラップ、スクロールした後にdivを固定したままにする

私はBootstrapを使用しており、シンプルなページを持っています here

緑色の[実行]ボタンをクリックしてページを下にスクロールすると、さらにレコードがロードされます。右側の列の広告に、たとえばページを下にスクロールして、広告divに到達したら、ページの上部から10ピクセルに「固定」します。

ご覧のように、代わりにページの下半分に残ります。

私はこれをdivのHTMLとして持っています：

<div class="col-md-3">
    <div data-spy="affix">
        <script type="text/javascript">
        .. advert
        <a href="#" class="back-to-top">Back to Top</a>
    </div>
</div>

私がやろうとしているので、私がやろうとしていることをする方法があるのだろうか？

ありがとう

jqueryhtmlcsstwitter-bootstrap
15
4532066

ブートストラップ4.0+アップデート

affixがbootstrap ここで述べたように から削除されることに注意してください。2018年の時点では、jQueryを避けて、反応またはvueより良いコーディング慣行のため。

これをbootstrap 4.0から今すぐ実行するには、sticky-topクラス。

サンプルコード：

<div class="card sticky-top">
...Something
</div>

そして、それはこのように見えます：

enter image description here

パディングとマージンが必要な場合は、それを設定するか、同じクラスの最上部に別のdivを追加できます。

14
Fangming

Bootstrap docs に従って、.affix、.affix-top、および.affix-bottomスタイルを自分で記述する必要があります。

.affix {
    top:50px;
    position:fixed;
}

接辞の開始位置を定義するには、要素のdata-offset-*属性を使用できます。

<div data-spy="affix" data-offset-top="50">

編集：使用法をよりわかりやすく説明するために、簡単な JSFiddle を作成しました。

14
cloying

bootstrapおよびjQuery

$(document).ready(function(){ 
        // bind and scroll header div
        $(window).bind('resize', function(e){
                $(".affix").css('width',$(".container-fluid" ).width());
        });
        $(window).on("scroll", function() {
                $(".affix").css('width',$(".container-fluid" ).width());
        });
});
.affix {
    top:50px;
    position: fixed;
        width: 100%;
        background-color:white;
        z-index:777;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='container-fluid'>
  <div data-spy="affix" data-offset-top="50">
        <div class="header_for_fix" >
                <div>First</div>
                <div>Second</div>
                <div>Third</div>
        </div>
 </div>
</div>
1
Vlad
$(document).ready(function(){ 
        // bind and scroll header div
        $(window).bind('resize', function(e){
                $(".affix").css('width',$(".container-fluid" ).width());
        });
        $(window).on("scroll", function() {
                $(".affix").css('width',$(".container-fluid" ).width());
        });
});
.affix {
    top:50px;
    position: fixed;
        width: 100%;
        background-color:white;
        z-index:777;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='container-fluid'>
  <div data-spy="affix" data-offset-top="50">
        <div class="header_for_fix" >
                <div>First</div>
                <div>Second</div>
                <div>Third</div>
        </div>
 </div>
</div>
0
Hitesh