Home-theater-designers
一部の Web サイト デザインでは、スクロール ダウンすると画面の上部に「固定」されるヘッダーを利用しています。スクロールしても表示されるヘッダーは、スティッキー ヘッダーと呼ばれることがよくあります。
カスタム コードを自分で作成するか、サードパーティのライブラリを使用して、React サイトにスティッキー ヘッダーを追加できます。
スティッキー ヘッダーとは
スティッキー ヘッダーは、ユーザーがページを下にスクロールしても画面の上部に固定されたままになるヘッダーです。これは、ユーザーがスクロールするときに重要な情報を表示し続けるのに役立ちます。
Windows7のブートディスクの作り方今日のメイク動画
ただし、スティック ヘッダーを使用すると、残りのデザインの画面領域が減少することに注意してください。固定ヘッダーを使用する場合は、短くすることをお勧めします。
スティッキー ヘッダーの作成
最初に行う必要があるのは、onscroll ハンドラーをセットアップすることです。この関数は、ユーザーがスクロールするたびに実行されます。これを行うには、ウィンドウ オブジェクトに onscroll イベント リスナーを追加します。 React フックの使用 . onscroll ハンドラーをセットアップするには、useEffect フックと window オブジェクトの addEventListener メソッドを使用する必要があります。
次のコードは、スティッキー ヘッダー コンポーネントを作成し、CSS を使用してスタイルを設定します。
import React, { useState, useEffect } from 'react';
function StickyHeader() {
const [isSticky, setSticky] = useState(false);
const handleScroll = () => {
const windowScrollTop = window.scrollY;
if (windowScrollTop > 10) {
setSticky(true);
} else {
setSticky(false);
}
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
const items = [
{
name: 'Home',
link: '/'
},
{
name: 'About',
link: '/about'
},
{
name: 'Contact',
link: '/contact'
}
];
const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
return (
<div className="App">
<header style={{ background: isSticky ? '#fff' : '', width: '100%', zIndex: '999',position:isSticky ?'fixed':'absolute' }}>
{items.map(item => (
<a href={item.link} key={item.name}>
{item.name}
</a>
))}
</header>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
</div>
);
}
export default StickyHeader;この方法ではインライン スタイルを使用しますが、CSS クラスを使用することもできます。例えば：
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
結果のページは次のようになります。
その他の機能
スティッキー ヘッダーをより使いやすくするためにできることは他にもいくつかあります。たとえば、トップに戻るボタンを追加したり、ユーザーが下にスクロールしたときにヘッダーを透明にしたりできます。
次のコードを使用して、トップに戻るボタンを追加できます。
import React, { useState, useEffect } from 'react';
function StickyHeader() {
const [isSticky, setSticky] = useState(false);
const [showBackToTop, setShowBackToTop] = useState(false);
const handleScroll = () => {
const windowScrollTop = window.scrollY;
if (windowScrollTop > 10) {
setSticky(true);
setShowBackToTop(true);
} else {
setSticky(false);
setShowBackToTop(false);
}
};
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
const items = [
{
name: 'Home',
link: '/'
},
{
name: 'About',
link: '/about'
},
{
name: 'Contact',
link: '/contact'
}
];
const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
return (
<div className="App">
<header style={{ background: isSticky ? '#fff' : '', width: '100%', zIndex: '999',position:isSticky ?'fixed':'absolute' }}>
{items.map(item => (
<a href={item.link} key={item.name}>
{item.name}
</a>
))}
</header>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
<div>
{showBackToTop && (
<button onClick={scrollToTop}>Back to top</button>
)}</div>
</div>
);
}
export default StickyHeader;このコードは、スティッキー ヘッダー コンポーネントを作成し、CSS を使用してスタイルを設定します。あなたもすることができます Tailwind CSS を使用してコンポーネントのスタイルを設定する .
代替方法
サードパーティ ライブラリを使用してスティッキー ヘッダーを作成することもできます。
反応スティッキーの使用
react-sticky ライブラリは、React でスティッキー要素を作成するのに役立ちます。 react-sticky を使用するには、最初にインストールします。
npm install react-sticky次に、次のように使用できます。
import React from 'react';
import { StickyContainer, Sticky } from 'react-sticky';
function App() {
const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
return (
<div>
<StickyContainer>
<Sticky>{({ style }) => (
<header style={style}>
This is a sticky header
</header>
)}
</Sticky>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
</StickyContainer>
</div>
);
}
export default App;上記のコードでは、まず、StickyContainer および Sticky コンポーネントを react-sticky ライブラリからインポートする必要があります。
Windows10ストップコードメモリ管理
次に、スティッキー要素を含むコンテンツの周りに StickyContainer コンポーネントを追加する必要があります。この場合、ヘッダーに続くリスト内でヘッダーをスティッキーにしたいので、2 つの周りに StickyContainer を追加します。
次に、スティッキーにしたい要素の周りに Sticky コンポーネントを追加します。この場合、それはヘッダー要素です。
最後に、Sticky コンポーネントに style prop を追加します。これにより、ヘッダーが正しく配置されます。
反応スティッキーノードの使用
React-stickynode は、React でスティッキー要素を作成するのに役立つもう 1 つのライブラリです。
Windows10から不要なプログラムを削除する方法
react-stickynode を使用するには、まずインストールします。
npm install react-stickynode次に、次のように使用できます。
import React from 'react';
import Sticky from 'react-stickynode';
function App() {
const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
return (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
This is a sticky header
</div>
</Sticky>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
</div>
);
}
export default App;まず、react-stickynode ライブラリから Sticky コンポーネントをインポートします。
次に、スティッキーにしたい要素の周りに Sticky コンポーネントを追加します。この場合、周囲に Sticky コンポーネントを追加して、ヘッダーをスティッキーにします。
最後に、Enabled と BottomBoundary の props を Sticky コンポーネントに追加します。有効化された小道具はヘッダーが固定されていることを確認し、bottomBoundary 小道具はページの下に行き過ぎないようにします。
ユーザー エクスペリエンスの向上
スティッキー ヘッダーを使用すると、ユーザーがページのどこにいるのかを簡単に見失う可能性があります。スティッキー ヘッダーは、画面が小さいモバイル デバイスでは特に問題になる可能性があります。
ユーザー エクスペリエンスを向上させるために、「トップに戻る」ボタンを追加することもできます。このようなボタンを使用すると、ユーザーはページの上部にすばやくスクロールして戻ることができます。これは、長いページで特に役立ちます。
準備ができたら、React アプリを GitHub Pages に無料でデプロイできます。