Bootstrap 4滚动到长粘性侧边栏的底部

Bootstrap 4是一种流行的前端开发框架，它提供了丰富的组件和样式，可以帮助开发人员快速构建响应式网站和应用程序。滚动到长粘性侧边栏的底部是指当页面滚动时，侧边栏会保持在页面的一侧，并且在滚动到页面底部时停止滚动，保持在底部位置。

为了实现这个效果，可以使用Bootstrap 4的CSS和JavaScript组件。以下是一种实现滚动到长粘性侧边栏底部的方法：

HTML结构：

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <!-- 主要内容 -->
    </div>
    <div class="col-md-4">
      <!-- 侧边栏内容 -->
    </div>
  </div>
</div>

CSS样式：

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sticky-bottom {
  position: sticky;
  bottom: 0;
}

JavaScript代码：

$(window).scroll(function() {
  var sidebarHeight = $('.sidebar').height();
  var windowHeight = $(window).height();
  var scrollTop = $(window).scrollTop();

  if (scrollTop + windowHeight >= sidebarHeight) {
    $('.sidebar').addClass('sticky-bottom');
  } else {
    $('.sidebar').removeClass('sticky-bottom');
  }
});

在上述代码中，我们首先定义了一个包含主要内容和侧边栏的HTML结构。然后，通过CSS样式将侧边栏设置为粘性定位，并设置底部位置为0。接下来，使用JavaScript监听页面滚动事件，计算侧边栏的高度、窗口高度和滚动距离，当滚动到页面底部时，为侧边栏添加一个类名，使其保持在底部位置。

推荐的腾讯云相关产品：腾讯云服务器（CVM）和腾讯云对象存储（COS）。