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

我正在尝试像右侧导航一样实现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>

最佳答案

我已经提出了一个使用jQuery的问题的解决方案，它基于视口和侧边栏的高度（fiddle here）使侧边栏粘在负位置：

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类添加到侧边栏底部的元素中（看起来不太正确）。 Fiddle here（调整窗口大小，以便侧边栏的文本长于窗口高度）。

.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>

关于javascript - Bootstrap 4滚动到长粘性侧栏的底部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56764900/