如何设置Bootstrap 4滚动到长粘性侧边栏的底部？

在开发中，经常需要实现一个垂直滚动的长粘性侧边栏，当用户滚动页面时，该侧边栏会跟随滚动并停留在页面的一侧。在Bootstrap 4中，可以使用CSS的sticky属性实现这一功能。本文将介绍如何设置Bootstrap 4滚动到长粘性侧边栏的底部。

1. 创建HTML结构

首先，我们需要在HTML中创建侧边栏。以下是一个基本的侧边栏HTML结构：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      <!-- 侧边栏内容... -->
    </div>
    <div class="col-sm-9">
      <!-- 主要内容... -->
    </div>
  </div>
</div>

这段代码使用Bootstrap 4的网格系统创建了一个具有两列的行，其中左列是侧边栏，右列是主要内容。

2. 添加CSS样式

接下来，我们需要添加CSS样式到我们的侧边栏中。我们可以使用以下CSS样式：

.sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: calc(100vh - 60px);
}

这个CSS代码将侧边栏设置为粘性定位，并将其固定在页面的顶部。height属性会将侧边栏高度设置为视口高度减去60像素，因为我们的导航栏高度为60像素。

3. 滚动到底部

要使侧边栏在到达页面底部时停留，可以使用以下JavaScript代码：

$(document).ready(function () {
  var sidebar = $('.sidebar');
  var sidebarHeight = sidebar.outerHeight();
  var contentHeight = $('.content').outerHeight();
  $(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    if (scrollTop > contentHeight - sidebarHeight) {
      sidebar.css('position', 'absolute');
      sidebar.css('top', contentHeight - sidebarHeight);
    } else {
      sidebar.css('position', 'sticky');
      sidebar.css('top', '0');
    }
  });
});

这个JavaScript代码将获取侧边栏和主要内容的高度，并在窗口滚动时检查是否到达了页面底部。如果已达到页面底部，则将侧边栏的位置更改为绝对定位并将其顶部设置为主要内容的高度减去侧边栏的高度。否则，将侧边栏设置为粘性定位并将其顶部设置为0。

4. 完整代码

HTML:

<div class="container-fluid">
  <nav class="navbar navbar-expand-md navbar-light bg-light">
    <!-- 导航栏内容... -->
  </nav>
  <div class="row">
    <div class="col-md-3">
      <div class="sidebar">
        <!-- 侧边栏内容... -->
      </div>
    </div>
    <div class="col-md-9">
      <div class="content">
        <!-- 主要内容... -->
      </div>
    </div>
  </div>
</div>

CSS:

.sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: calc(100vh - 60px);
}

JavaScript:

$(document).ready(function () {
  var sidebar = $('.sidebar');
  var sidebarHeight = sidebar.outerHeight();
  var contentHeight = $('.content').outerHeight();
  $(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    if (scrollTop > contentHeight - sidebarHeight) {
      sidebar.css('position', 'absolute');
      sidebar.css('top', contentHeight - sidebarHeight);
    } else {
      sidebar.css('position', 'sticky');
      sidebar.css('top', '0');
    }
  });
});

至此，我们就完成了Bootstrap 4滚动到长粘性侧边栏的底部的设置。