如何在 Bootstrap 4 中使左右 Grid 保持粘性，中间一个可滚动

Question

我正在使用 Bootstrap 4 作为网站主页。我使用了 3 个网格，col-md-3、col-md-6、col-md-3。我希望第一个和最后一个网格粘在 Position 上，中间可以滚动。


            <div class="col-lg-3 d-none d-md-block">
               //want sticky on fixed left position
            </div>
            <div class="col-lg-6">
               //all contents in middle scrollable
            </div>
            <div class="col-lg-3 d-none d-md-block">
              //want sticky on fixed right position
            </div>

Check code here

Answer 1

在中间部分添加滚动而不是将 fixed 定位到 2 个元素，因为它会在响应式中产生问题和额外的覆盖样式。

已更新HTML

<div class="col-lg-6">
      <div class="fixed">
         //all contents in middle scrollable
      </div>
    </div>

CSS

 .fixed {
        height: calc(100vh - 130px);// 130px is the extra space set it accordingly if you didn't find aligned divs
        overflow: scroll;
    }

Answer 2

为您的列表组添加一个自定义 class，例如 myStickyListGroup。

现在将 css 设为 class，正如我在下面的 css 代码中应用的那样。

然后制作脚本以使用 javascript 更新列表的 top 位置，如下所示。

我希望这对您有用，我必须通知您，您必须根据页面中的要求更改脚本条件。

$(window).on('scroll', function(){
  var windowTop = $(window).scrollTop();
  $('.myStickyListGroup').css({'top': windowTop});
});

.myStickyListGroup{
  position: absolute;
  left: 15px;
  right: 15px;
}

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Offline</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
   </head>
   <body style="background-color: #eceef4">
      <div class="container" style="position:relative; margin-top:100px">
         <div class="row">
            <div class="col-lg-3 d-none d-lg-block">
               <ul class="list-group myStickyListGroup shadow bg-white rounded">
                  <li class="list-group-item rounded">List Item 1</li>
                  <li class="list-group-item rounded">List Item 2</li>
                  <li class="list-group-item rounded">List Item 3</li>
                  <li class="list-group-item rounded">List Item 4</li>
                  <li class="list-group-item rounded">List Item 5</li>
               </ul>
               <hr class="d-sm-none">
            </div>
            <div class="col-lg-6">
               <div class="card shadow bg-white rounded">
                  <div class="card-body">
                     <h2>TITLE HEADING</h2>
                     <h5>Title description, Dec 7, 2017</h5>
                     <div class="row justify-content-center">
                        <div id="mdb-lightbox-ui"></div>
                        <!-- <div class="mdb-lightbox"> -->
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145).jpg" class="img-fluid circle">
                           </a>
                        </figure>
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(150).jpg" class="img-fluid" />
                           </a>
                        </figure>
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(152).jpg" class="img-fluid" />
                           </a>
                        </figure>
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).jpg" class="img-fluid" />
                           </a>
                        </figure>
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(151).jpg" class="img-fluid" />
                           </a>
                        </figure>
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(40).jpg" class="img-fluid" />
                           </a>
                        </figure>
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(148).jpg" class="img-fluid" />
                           </a>
                        </figure>
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" class="img-fluid" />
                           </a>
                        </figure>
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(149).jpg" class="img-fluid" />
                           </a>
                        </figure>
                        <!-- </div> -->
                     </div>
                  </div>
               </div>
               <div class="card shadow bg-white rounded">
                  <div class="card-body">
                     <h2>TITLE HEADING</h2>
                     <h5>Title description, Dec 7, 2017</h5>
                     <div class="row justify-content-center">
                        <div id="mdb-lightbox-ui"></div>
                        <!-- <div class="mdb-lightbox"> -->
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145).jpg" class="img-fluid circle">
                           </a>
                        </figure>
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(150).jpg" class="img-fluid" />
                           </a>
                        </figure>
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(152).jpg" class="img-fluid" />
                           </a>
                        </figure>
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).jpg" class="img-fluid" />
                           </a>
                        </figure>
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(151).jpg" class="img-fluid" />
                           </a>
                        </figure>
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(40).jpg" class="img-fluid" />
                           </a>
                        </figure>
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(148).jpg" class="img-fluid" />
                           </a>
                        </figure>
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" class="img-fluid" />
                           </a>
                        </figure>
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(149).jpg" class="img-fluid" />
                           </a>
                        </figure>
                        <!-- </div> -->
                     </div>
                  </div>
               </div>
               <hr class="d-sm-none">
            </div>
            <div class="col-lg-3 d-none d-lg-block">
               <ul class="list-group myStickyListGroup shadow bg-white rounded">
                  <li class="list-group-item rounded">List Item 1</li>
                  <li class="list-group-item rounded">List Item 2</li>
                  <li class="list-group-item rounded">List Item 3</li>
                  <li class="list-group-item rounded">List Item 4</li>
                  <li class="list-group-item rounded">List Item 5</li>
               </ul>
               <hr class="d-sm-none">
            </div>
         </div>
      </div>
   </body>
</html>

Answer 3

最简单的方法是使用Bootstrapsticky-topclass。

<div class="container" style="position:relative; margin-top:100px">
    <div class="row">
        <div class="col-lg-3 d-none d-md-block">
            <ul class="list-group shadow bg-white rounded sticky-top">
                ..
            </ul>
            <hr class="d-sm-none">
        </div>
        <div class="col-md-6">
            <div class="card shadow bg-white rounded">
                //
            </div>
            <hr class="d-sm-none">
        </div>
        <div class="col-md-3 d-none d-md-block">
            <ul class="list-group shadow bg-white rounded sticky-top">
                ..
            </ul>
            <hr class="d-sm-none">
        </div>
    </div>
</div>

https://codeply.com/p/AUtPqy2GY2

编辑

如果粘性项目上方有其他东西（如导航栏或 header），请相应地覆盖 sticky-top class 的 top 以偏移高度。 ..

.sticky-top {
    top: 100px; /* height of header */
}

如何在 Bootstrap 4 中使左右 Grid 保持粘性，中间一个可滚动

How to make left and right Grid sticky, and Middle one scrollable in Bootstrap 4

css

bootstrap-4

fixed

sticky