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

Question

我正在努力实现像 Facebook 一样的右侧导航。当侧边栏内容高于视口(viewport)时，如果您向下滚动侧边栏，则应在它粘在屏幕上之前滚动到最底部。

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 使侧边栏根据视口(viewport)和侧边栏的高度 ( 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>