Блог

Я прочитал следующую страницу «Как сделать липкую боковую панель с двумя строками 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; в качестве решения. Это сработало, чтобы исправить заголовок сверху, но когда я попробовал это для боковой панели, он был исправлен в верхнем левом углу. Я хочу исправить боковую панель в правой части страницы.