Sticky by using CSS

 avatar
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