Question

我在position: sticky的帮助下创建了一个侧边栏，效果很好。

请参阅以下脚本以获取颜色标识，并附上以下文字。

当黑色区域向下滚动时，绿色区域相对于红色顶杆保持粘性位置。但是绿色区域的内容溢出了页面的视口。

当滚动到达页面的末端附近时，即当溢出的绿色区域的高度等于页面中剩余滚动的高度时，绿色区域开始移动。

但我想移动绿色区域与黑色区域一起滚动，并在它到达它时结束。意味着，当侧边栏的高度大于视口时，侧边栏应在窗口的滚动方向上滚动，然后再粘贴。（In-Short：我希望它像facebook的侧栏或类似的东西一样移动https://abouolia.github.io/sticky-sidebar/examples/scrollable-element.html）

position:sticky是否可以实现？有一点javascript和jquery的帮助？

当position:fixed在这里时，我不会像其他很少的其他图书馆那样使用旧版position:sticky！

＆＃13;

* {
  font-family: "Courier New", Courier, monospace;
  color: #fff;
  text-align: center;
}

.container {
  height: 2000px;
  position: relative;
}

.topbar {
  height: 50px;
  line-height: 50px;
  background: #D16666;
  position: -webkit-sticky;
  position: sticky;
  border-radius: 5px;
  top: 0px;
  z-index: 10;
}

.sidebar {
  position: -webkit-sticky;
  position: sticky;
  border-radius: 5px;
  top: 60px;
  height: 1000px;
  line-height: 1000px;
  background: #B6C649;
  border-radius: 5px;
  position: -webkit-sticky;
  position: sticky;
}

.row {
  margin-left: 0;
  margin-right: 0;
  position: relative;
}


.main-content {
  height: 1800px;
  line-height: 1800px;
  background: #2C4251;
  border-radius: 5px;
  top: 10px;
}

.col-8 {
  top: 10px;
  padding: 0;
  padding-left: 0 !important;
}

＆＃13;

<html>

<head>
  <link href="https://static.aftertutor.com/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <div class="topbar">Topbar</div>
    <div class="row">
      <div class="col-4">
        <div class="sidebar">Sidebar</div>
      </div>
      <div class="col-8">
        <div class="main-content">Main Content</div>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

您需要一个侧边栏的顶部位置，即您允许它向上移动的空间量。

一个小的javascript函数可以很容易地计算出来：

function set ()  {
    var sidebar = document.getElementById("sidebar");
    var sidebarHeight = sidebar.clientHeight;
    var availableHeight = window.innerHeight;
    var sidebarTop =  availableHeight - sidebarHeight - 20;
    // 20px is the amount of space that will be left under the bottom of the sidebar
    // at the sticky position
    sidebar.style.top = sidebarTop + "px";
}

* {
  font-family: "Courier New", Courier, monospace;
  color: #fff;
  text-align: center;
}

.container {
  height: 2000px;
  position: relative;
}

.topbar {
  height: 50px;
  line-height: 50px;
  background: #D16666;
  position: -webkit-sticky;
  position: sticky;
  border-radius: 5px;
  top: 0px;
  z-index: 10;
}

.sidebar {
  position: -webkit-sticky;
  position: sticky;
  border-radius: 5px;
  top: 60px;
  height: 1000px;
  line-height: 1000px;
  background: #B6C649;
  border-radius: 5px;
  position: -webkit-sticky;
  position: sticky;
  margin-top: 10px;
}

.row {
  margin-left: 0;
  margin-right: 0;
  position: relative;
}


.main-content {
  height: 1800px;
  line-height: 1800px;
  background: #2C4251;
  border-radius: 5px;
  top: 10px;
}

.col-8 {
  top: 10px;
  padding: 0;
  padding-left: 0 !important;
}

button {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 30px;
    background-color:blue;
    z-index: 10;
}

<head>
  <link href="https://static.aftertutor.com/css/bootstrap.min.css" rel="stylesheet" />
</head>

  <div class="container">
    <div class="topbar">Topbar</div>
    <div class="row">
      <div class="col-4">
        <div class="sidebar" id="sidebar">Sidebar</div>
      </div>
      <div class="col-8">
        <div class="main-content">Main Content</div>
      </div>
    </div>
  </div>
  <button onclick="set();">click me</button>

Answer 2

它完全应该做的事情。你有高度为1800px的盒子和高度为1000px的粘性元素。它是粘性的，直到它到达相对父框的底部。粘性应切换到亲戚。你模拟固定元素。

编辑：删除了错误且误导性的代码段，广告评论

CSS3 + Javascript位置粘性可滚动内容

2 个答案: