Bootstrap 4滾動到長粘性側欄的底部

Question

我正在嘗試像右側導航一樣實現Facebook。 當側邊欄內容高於視口時，如果向下滾動，則側邊欄應滾動到最底端，然后再粘貼到屏幕上。

的jsfiddle

    <div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="header">
                Header
            </div>
        </div>


        <div class="col-md-9 col-sm-9 col-xs-9">
          <div class="main-content">
              Main Content
          </div>
        </div>

        <div class="col-md-3 col-sm-3 col-xs-3">
            <div class="sidebar-right sticky-top">
                Sidebar Content

                <div class="content-bottom">
                      Content
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="footer">
                Footer
            </div>
        </div>
    </div>
</div>

Answer 1

我已經提出了一個使用jQuery的問題的解決方案，它基於視口和側邊欄的高度使側邊欄粘在負位置（ 此處是小提琴 ）：

 function setPosition() { $(".sidebar-right").css({ 'position': 'sticky', 'top': window.innerHeight - $(".sidebar-right").innerHeight() }); } // Set initial positioin setPosition(); // Adjust position when window is resized $(window).resize(setPosition); 

 .header { width: 100%; background-color: green; text-align: center; padding: 15px 20px; color: #fff; } .sidebar-left { background-color: purple; color: #fff; padding: 15px; height: 500px; } .sidebar-right { background-color: purple; color: #fff; padding: 15px; height: 500px; } .main-content { background-color: red; height: 900px; color: #fff; padding: 15px; } .footer { width: 100%; background-color: green; text-align: center; padding: 15px 20px; color: #fff; } .content-bottom { position: absolute; bottom: 0; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="header"> Header </div> </div> <div class="col-md-9 col-sm-9 col-xs-9"> <div class="main-content"> Main Content </div> </div> <div class="col-md-3 col-sm-3 col-xs-3 sb"> <div class="sidebar-right"> Sidebar Content <div class="content-bottom"> Content </div> </div> </div> <div class="col-md-12"> <div class="footer"> Footer </div> </div> </div> </div> 

如果您不想使用jQuery，則可以將sticky-top類添加到側邊欄底部的元素中（它看起來不太正確）。 在此處撥弄小提琴 （調整窗口大小，以便側邊欄的文本長於窗口高度）。

 .header { width: 100%; background-color: green; text-align: center; padding: 15px 20px; color: #fff; } .sidebar-left { background-color: purple; color: #fff; padding: 15px; height: 500px; } .sidebar-right { background-color: purple; color: #fff; padding: 15px; height: 100%; } .main-content { background-color: red; height: 900px; color: #fff; padding: 15px; } .footer { width: 100%; background-color: green; text-align: center; padding: 15px 20px; color: #fff; } .content-bottom { position: absolute; bottom: 0; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="header"> Header </div> </div> <div class="col-md-9 col-sm-9 col-xs-9"> <div class="main-content"> Main Content </div> </div> <div class="col-md-3 col-sm-3 col-xs-3"> <div class="sidebar-right"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis turpis enim. Sed non lacinia lacus. <div class="sticky-top"> Curabitur lorem lorem, efficitur sit amet ex non, viverra porttitor odio. </div> </div> </div> <div class="col-md-12"> <div class="footer"> Footer </div> </div> </div> </div>