我怎样才能使组件固定在 window 中以达到特定的滚动间隔

Question

我正在尝试复制一个组件，例如 this airbnb 页面上的边栏。让组件在您滚动到页面的某个部分之前保持固定的最佳方法是什么？我正在使用功能性 React 和 Material-UI 组件，我对前端开发和一般来说 typescript/html/css 还很陌生，如果这个问题在其他地方得到了回答，我深表歉意。我不确定描述问题的最佳方式是什么，所以我在网上找不到解决方案。

Answer 1

您可以使用 position: sticky 和 top:0 来实现。

此处top:0设置为粘在页面顶部，如果你想要上面的一些space，可以随意设置top:50px或类似你希望的[=17] =]

如果内容到达视口顶部，这将粘贴您的内容

div{display: block;}

.some_top_content {
  width: 100%;
  height: 100px;
  background: yellow;
}

.container::after {
  clear: both;
  display: table;
  content: '';
}

*{box-sizing: border-box;}

.left_content {
  height: 800px;
  float: left;
  width: 48%;
  margin-right: 4%;
  background: blue;
}

.right_content {
  width: 48%;
  float: right;
  position: sticky;
  top: 0;
  height:  400px;
  background: green;
}

.some_bottom_content {
  width: 100%;
  height: 600px;
  background: red;
}

<div class="some_top_content"></div>
<div class="container">
  <div class="left_content"></div>
  <div class="right_content"></div>
</div>
<div class="some_bottom_content"></div>

PS：运行全页视图中的此代码段

Codepen here

我怎样才能使组件固定在 window 中以达到特定的滚动间隔

How can i make a component fixed in the window for specific scrolling intervals

css

frontend

typescript

reactjs

material-ui