【React】スクロールしてもあるエリアを固定したい！要素の固定をする

投稿者 投稿日:

検索項目エリアを固定するためにはCSS でスタイリングを行う方法が一般的です

position: fixed を使用すると、スクロールしてもその要素が常に画面の特定位置に固定されます


1. CSSのスタイリング

.fixed-search-area {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
  z-index: 1000;
}

.results-area {
  margin-top: 100px; /* 検索項目エリアの高さに合わせる */
}

2. Reactコンポーネント例

import React from 'react';
import './App.css';

const SearchComponent: React.FC = () => {
  return (
    <div className="fixed-search-area">
      <h2>検索項目</h2>
      {/* 検索フォームやフィルタ項目をここに追加 */}
    </div>
  );
};

const ResultsComponent: React.FC = () => {
  return (
    <div className="results-area">
      <h2>検索結果</h2>
      {/* 検索結果リストをここに表示 */}
      <p>検索結果1</p>
      <p>検索結果2</p>
      <p>検索結果3</p>
      {/* 結果が長くなればスクロール */}
    </div>
  );
};

const App: React.FC = () => {
  return (
    <div>
      <SearchComponent />
      <ResultsComponent />
    </div>
  );
};

export default App;
  • fixed-search-area: 検索項目エリアに position: fixed を適用しているため、スクロールしても上部に固定されます
  • results-area: 検索結果エリアは検索項目エリアが固定されているため、その高さに応じて margin-top を調整しています


これで、検索項目エリアが固定され、下にスクロールしても常に画面上部に表示されるようになります

cssで簡単にコントロールできるんですよね～

ぜひお試しください！

是非フォローしてください

最新の情報をお伝えします

投稿者: Mon