我正在尝试在滚动屏幕期间使用 React 功能组件实现类交换站点导航。
我向 windows 添加了一个侦听器,并使用 getBoundingClientRect 方法来检查我的顶部何时到达更改其类的位置。
无论我的滚动位置如何,下面的代码总是返回等于零的 Top。
在这个例子中我哪里错了?
import React, {useEffect, useRef} from "react";
const Navigation = () => {
const inputRef = useRef();
const sections = [{
name: "Portfolio",
url: "#portfolio"
},
{
name: "About",
url: "#about"
},
{
name: "Contact",
url: "#contact"
}];
const navLinks = sections.map((section, index) => {
return (
<li className="nav-item mx-0 mx-lg-1" key={index}>
<a className="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href={section.url}>{section.name}</a>
</li>
)
});
const handleScroll = () => {
let offsetTop = inputRef.current.getBoundingClientRect().top;
console.log('Top ' + offsetTop);
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
});
return (
<nav className="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav" ref={ inputRef }>
<div className="container">
<a className="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
<button className="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i className="fas fa-bars"></i>
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav ml-auto">
{navLinks}
</ul>
</div>
</div>
</nav>
);
};
export default Navigation;
滚动时,上、右、下、左、高和宽的位置是相同的。
我希望滚动页面时顶部值会发生变化。
我的代码正在运行,请遵循最终版本
import React, { useEffect, useRef, useState } from "react";
import { Link, animateScroll as scroll } from "react-scroll";
const Navigation = () => {
const inputRef = useRef();
const [navClass, setNavClass] = useState('');
const sections = [{
name: "Portfolio",
url: "portfolio"
},
{
name: "About",
url: "about"
},
{
name: "Contact",
url: "contact"
}];
const navLinks = sections.map((section, index) => {
return (
<li className="nav-item mx-0 mx-lg-1" key={index}>
<Link
activeClass="active"
to={section.url}
spy={true}
smooth="easeInOutQuart"
offset={-70}
duration={800}
className="nav-link py-3 px-0 px-lg-3 rounded"
href="">
{section.name}
</Link>
</li>
)
});
const scrollToTop = () => {
scroll.scrollToTop();
};
const handleScroll = () => {
let offsetTop = window.pageYOffset;
if ( offsetTop > 100 ){
setNavClass('navbar-shrink');
}else{
setNavClass('');
}
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
});
return (
<nav className={`navbar navbar-expand-lg bg-secondary text-uppercase fixed-top ${navClass}`} id="mainNav" ref={inputRef}>
<div className="container">
<a className="navbar-brand js-scroll-trigger" href="#page-top" onClick={scrollToTop}>Start Bootstrap</a>
<button className="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i className="fas fa-bars"></i>
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav ml-auto">
{navLinks}
</ul>
</div>
</div>
</nav>
);
};
export default Navigation;