如何在滚动时将元素从上方粘贴到顶部？答案

【问题标题】：How to stick an element to the top coming from above on scrolling?如何在滚动时将元素从上方粘贴到顶部？
【发布时间】：2021-10-10 17:00:46
【问题描述】：

我正在寻找创建两个粘性导航项目。蓝色的从页面底部开始并粘在页面顶部。红色的从顶部开始离开屏幕，然后随着第一个粘在页面上向下移动，也粘在顶部。

纯 CSS 是目标，但我也可以使用 javascript (React js)。感谢您的任何建议！

const Navbar = () => {
  return (
    <nav>
      <div></div>
      <div></div>
    </nav>
  )
}

// Render it
ReactDOM.render(
  <Navbar/>,
  document.getElementById("react")
);

body {
  margin: 0;
  height: 300vh;
}

nav {
  height: 50px;
  display: flex;
}

nav div {
  width: 100px;
  height: 100%;
}

nav div:first-child {
  background-color: red;

}

nav div:last-child {
  background-color: blue;
}

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【问题讨论】：

标签： javascript css reactjs nav sticky

【解决方案1】：

const Navbar = () => {
  return (
    <div ></div>
     
   
  )
}

// Render it
ReactDOM.render(
  <Navbar/>,
  document.getElementById("react")
);

body {
  margin: 0;
  height: 300vh;
}
div{
 width:100px;
 height:100px;
 background-color: red; 
 position:sticky;
 top:50px;
 }

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我认为使用 position : sticky 可以解决您的问题并进行结帐 https://developer.mozilla.org/en-US/docs/Web/CSS/position

【讨论】：