Question

我正试图像这样：https://interfacelovers.com/

内容固定在右侧，只有左侧滚动到特定高度，然后正常滚动所有页面，问题是在我的情况下，当我向下滚动右侧div，我的内容移动。有没有办法通过javascript这样做（我相信他们是这样做的。）

干杯

Answer 1

粘滞位置

您可以使用CSS3实现此目的，请查看以下代码段。

请注意以下事项：

始终检查浏览器兼容性 - 我没有为您完成此操作，这是您的责任。
您可能需要一些额外的CSS才能使其更好并且更具响应性。

祝你好运！

＆＃13;

#bigContainer {
  width: 100%;
  height: 1000px;
  background-color: blue;
}

#theSticky {
  background-color: red;
  position: sticky;
  width: 50%;
  height: 200px;
  top: 0px;
}

.rightItems {
  margin-left: 50%;
  width: 200px;
  height: 200px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: green;
}

＆＃13;

<div id='bigContainer'>
  <div id='theSticky'>
  </div>
  <div class='rightItems'>
  </div>
  <div class='rightItems'>
  </div>
  <div class='rightItems'>
  </div>
</div>

<div class='rightItems'>
</div>
<div class='rightItems'>
</div>
<div class='rightItems'>
</div>
<div class='rightItems'>
</div>
<div class='rightItems'>
</div>
<div class='rightItems'>
</div>
<div class='rightItems'>
</div>
<div class='rightItems'>
</div>
<div class='rightItems'>
</div>

＆＃13;

Answer 2

要修复页面中的元素，可以将css属性position设置为fixed：

＆＃13;

#divFixed{
  position:fixed;
  background-color:red;
  top:100px;
  left:200px;
  width:50px;
  height:50px;
}

#divBackground{
  background-color:yellow;
  width:100%;
  height:1000px;
}

＆＃13;

<div id="divFixed">
FIXED
</div>
<div id="divBackground">
NOT FIXED<br>
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
13<br>
14<br>
15<br>
16<br>
17<br>
18<br>
19<br>
20<br>
</div>

＆＃13;

您可以根据距页面一侧的距离使用顶部，左侧，右侧和底部属性设置位置。

链接页面https://interfacelovers.com/使用此css属性当前使用javascript来更改页面滚动时的属性

滚动位置固定的div

2 个答案:

粘滞位置