CSS3 + Javascript位置粘性可滚动内容 [英] CSS3+Javascript position sticky scrollable with content

问题描述

我在位置：粘贴的帮助下创建了一个侧边栏，效果很好。

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

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

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

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

这是否可以用位置：粘？有一点javascript和jquery的帮助？

我不想用旧的位置：固定就像其他很少的其他库一样 position：sticky 就在这里！

  * {font-family：Courier New，Courier，monospace;颜色：#fff; text-align：center;}。container {height：2000px; position：relative;}。topbar {height：50px; line-height：50px;背景：＃D16666;职位：-webkit-sticky;位置：粘; border-radius：5px;顶部：0px; z-index：10;}。sidebar {position：-webkit-sticky;位置：粘; border-radius：5px;上：60px;身高：1000px; line-height：1000px;背景：＃B6C649; border-radius：5px;职位：-webkit-sticky; position：sticky;}。row {margin-left：0; margin-right：0; position：relative;} .main-content {height：1800px; line-height：1800px;背景：＃2C4251; border-radius：5px; top：10px;}。col-8 {top：10px;填充：0; padding-left：0！important;}  

 < 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>补充工具栏< / div> < / DIV> < div class =col-8> < div class =main-content>主要内容< / div> < / DIV> < / DIV> < / div>< / body>< / html>  

解决方案

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

A小javascript函数可以轻松计算：

  function set（）{var sidebar = document.getElementById（sidebar）; var sidebarHeight = sidebar.clientHeight; var availableHeight = window.innerHeight; var sidebarTop = availableHeight  -  sidebarHeight  -  20; // 20px是侧边栏底部//粘性位置sidebar.style.top = sidebarTop +px;}   
  * {font-family：Courier New，Courier，monospace;颜色：#fff; text-align：center;}。container {height：2000px; position：relative;}。topbar {height：50px; line-height：50px;背景：＃D16666;职位：-webkit-sticky;位置：粘; border-radius：5px;顶部：0px; z-index：10;}。sidebar {position：-webkit-sticky;位置：粘; border-radius：5px;上：60px;身高：1000px; line-height：1000px;背景：＃B6C649; border-radius：5px;职位：-webkit-sticky;位置：粘; margin-top：10px;}。row {margin-left：0; margin-right：0; position：relative;} .main-content {height：1800px; line-height：1800px;背景：＃2C4251; border-radius：5px; top：10px;}。col-8 {top：10px;填充：0; padding-left：0！important;} button {position：absolute;顶部：0px;左：0px;身高：30px;背景色：蓝色; 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 =sidebarid =sidebar>补充工具栏< / div> < / DIV> < div class =col-8> < div class =main-content>主要内容< / div> < / DIV> < / DIV> < / DIV> < button onclick =set（）;>点击我< / button>  
 

I have created a sidebar with the help of position: sticky and it works great.

Please see the script below for color identification with the following text.

As the black area scrolls down, the green area sticks put to it's sticky position with respect to the red topbar. But the green area is has content that overflows page's viewport.

As scroll reach near the page's end, i.e exactly when the height of overflown green area is equal to the height of the remaining scroll in the page, the green area starts to move.

But I want to move the green area to scroll along with the black area, and stay put when it reached it's end. Means, when the height of the sidebar is larger than the viewport, the sidebar should scroll at the window's scroll direction before getting affixed. (In-Short: I want it to move like facebook's side bar or something like this https://abouolia.github.io/sticky-sidebar/examples/scrollable-element.html)

Is that even possible with position:sticky? With a little help with javascript and jquery?

I don't wan't to go with old position:fixed like few other libs out there when position:sticky is here!

* {
  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;
}

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

解决方案

You need a top position for the sidebar that is the amount of space that you allow it to go upwards.

A little javascript funcion can calculate this easily:

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>

这篇关于CSS3 + Javascript位置粘性可滚动内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！