Прикрепленный верхний и нижний колонтитулы с использованием React - PullRequest
Новая
       60

Прикрепленный верхний и нижний колонтитулы с использованием React

0 голосов
/ 05 августа 2020

У меня есть сайт, созданный с помощью REACT, и я хочу, чтобы заголовок оставался наверху. У меня есть файл header. js, а затем мой css. Я прикрепил файл js с функцией, но не знаю, как включить его в JSX 

header.js

export default class Header extends Component {
  render() {
    return (
      <React.Fragment>
        <header className={sticky ? "home sticky" : "home"} id="home">
          <nav className="nav">
            <ul id="nav" className="nav">
              <li className="current">
                <a className="home" href="#home">
                  Home
                </a>
              </li>
              <li>
                <a className="about" href="#about">
                  About
                </a>
              </li>
         </nav>
    </header>
  </React.Fragment
);
};
}

index.css

header {
  display: contents;
}

.sticky {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;
}

header nav {
  background-color: #a1793a;
  display: grid;
}

useSticky.js
import { useEffect, useState, useRef } from 'react';

function useSticky() {
  const [isSticky, setSticky] = useState(false)
  const element = useRef(null)

  const handleScroll = () => {
    window.scrollY > element.current.getBoundingClientRect().bottom
      ? setSticky(true)
      : setSticky(false)
  }

  // This function handle the scroll performance issue
  const debounce = (func, wait = 20, immediate = true) => {
    let timeOut
    return () => {
      let context = this,
        args = arguments
      const later = () => {
        timeOut = null
        if (!immediate) func.apply(context, args)
      }
      const callNow = immediate && !timeOut
      clearTimeout(timeOut)
      timeOut = setTimeout(later, wait)
      if (callNow) func.apply(context, args)
    }
  }

  useEffect(() => {
    window.addEventListener("scroll", debounce(handleScroll))
    return () => {
      window.removeEventListener("scroll", () => handleScroll)
    }
  }, [debounce, handleScroll])

  return { isSticky, element }
}

export default useSticky;

У меня есть липкая функция, но она не регистрируется ни на сайте, ни через css.

Заголовок не остается наверху, я не уверен, что делаю не так.

1 Ответ

0 голосов
/ 06 августа 2020

position: sticky и display: contents не работают вместе: 

<div>
  <div style="position: sticky; top: 0; display: contents;">cool</div>
  <! -- doesn't stick to top -->
  <div style="height: 1200px;"></div>
</div>

поэтому изменение: display: contents на: display: block устраняет проблему: Посмотреть вживую

...