时间戳

首页 > 解决方案 > 做位置：粘性；React 组件也以同样的方式工作吗？

html - 做位置：粘性；React 组件也以同样的方式工作吗？

问题描述

我已阅读以下页面“如何使用两行 CSS 制作粘性侧边栏” https://dev.to/clairecodes/how-to-make-a-sticky-sidebar-with-two-lines-of- css-2ki7

并且我试图对我的 React 项目做同样的事情，但是当我滚动页面时侧边栏没有正确跟随。

据我所知，我注意到上述文章中提到的示例与我的项目之间的唯一区别是是否使用了 React 组件。

[文章的例子]

<div class="wrapper">
  <div class="main">
    Main content
  </div>
  <div class="sidebar">
    Sticky sidebar
  </div>
</div>

[我的项目]

import React from 'react';
import Posts from './Posts';
import SearchAndRecommendation from './SearchAndRecommendation';
import Footer from './Footer';

class Home extends React.Component{
  render(){
    return(
      <div className="wrapper">
        <main>
          <Posts/>
        </main>
        <aside className="sidebar">
          <SearchAndRecommendation/>
          <Footer/>
        </aside>
      </div>    
    )
  }
}

export default Home;

我在我的项目中使用了与文章相同的 CSS 代码，但'position: sticky;'它不起作用。使用 React 组件是否与此有关？

顺便说一句，我不打算position: fixed;用作解决方案。它可以将标题固定在顶部，但是当我尝试将它用于侧边栏时，它固定在左上角。我想修复页面右侧的侧边栏。

标签： htmlcssreactjs

解决方案

推荐阅读