如何让左侧或右侧部分暂时保持粘性？答案

【问题标题】：how to make left or right section sticky for some time being?如何让左侧或右侧部分暂时保持粘性？
【发布时间】：2020-09-09 03:28:12
【问题描述】：

我想了解我们如何暂时固定特定部分的位置，就像下面的示例一样。

https://www.apple.com/shop/buy-watch/apple-watch?option.watch_cases=MWT32LL/A&option.watch_bands=MXP02AM/A&preSelect=false&product=Z0YQ&step=detail#

在上面的链接中，苹果手表产品是固定的，而右边的内容移动了一些，然后整个页面移动了。

我尝试通过提供类 sticky-top

固定左侧来解决此问题

<div class ="container">
<div class="row">
<div class = "col-sm-3 sticky-top">
<h1> left container</h1>
</div>
<div class = "col-sm-9 offset-2"></div>
</div>
</div>

这里我并没有把整个代码只是我尝试过但未能实现的精华。

【问题讨论】：

你用的是什么浏览器？这个答案可能会有所帮助：stackoverflow.com/a/52580656/2570277
@Shivani，你能分享完整的源代码吗？为了使粘性起作用，您应该拥有高度超过窗口高度（100vh）的内容。

标签： javascript php html css bootstrap-4

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial;
  color: white;
}

.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.left {
  left: 0;
  background-color: #111;
}

.right {
  right: 0;
  background-color: red;
  overflow-y: auto;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.centered img {
  width: 150px;
  border-radius: 50%;
}
</style>
</head>
<body>

<div class="split left">
  <div class="centered">
      
       <p>Some text.</p>

  </div>
</div>

<div class="split right">
  <div class="centered">
   <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
    <p>Some text here too.</p>
  </div>
</div>
     
</body>
</html>

我认为这个骨架足以实现你想要的

【讨论】：

【解决方案2】：

你需要额外添加的是在粘性部分添加 height CSS 属性。（左还是右）请参考：https://jsfiddle.net/kevindev725/6y7kmbh1/44/

<div class="row">
  <div class="left sticky-top">
    left sticky content
  </div>
  <div clss="right">
    right scrollable content
  </div>
</div>

Bootstrap 会将position: stikcy 设置为sticky-top 类，但您应该为左侧粘性内容设置固定大小（根据内容高度任意设置）。如果height:fit-content 或height: 100px 或您想在右侧滚动时显示内容高度的任何内容，都可以。希望这会有所帮助。

【讨论】：