Sticky by using CSS
ilyasidorchik
jsx
10 months ago
977 B
12
Indexable
import React, { useState } from 'react';
import Item from './Item';
import './style.css';
/*
.top-section_sticky {
position: sticky;
top: 0; /* «прилипает» у верха окна */
z-index: 1; /* по желанию, чтобы перекрывать контент */
background: #fff;/* чтобы не просвечивало */
}
*/
const items = new Array(6);
export default function App() {
const [count, setCount] = useState(0);
const handleAdd = useCallback(() => setCount(prev => prev + 1), []);
return (
<div className="App">
<div className="block-wrapper">
<div className="top-section top-section_sticky">
<button type="button" onClick={() => alert(count)}>Show count</button>
<button type="button" onClick={() => setCount(0)}>Reset count</button>
</div>
{items.map((_, i) => (
<Item key={i} onAdd={handleAdd} />
))}
</div>
</div>
);
}
Editor is loading...
Leave a Comment