如何在react中创建滚动条

Question

我试图在用户向下滚动时将粘性导航条效果添加到网站的导航条。也就是说，当浏览器向下滚动到一定高度时，我希望导航条固定在页面顶部

我试图实现这与react钩子。下面是导航栏

的代码Navbar.js

import { useEffect, useState } from "react";
const NavBar = () => {
// sticky nav
const [stickyClass, setStickyClass] = useState("");
function stickNavbar() {
let windowHeight = window.scrollY;
setStickyClass("sticky-nav") ? windowHeight > 500 : setStickyClass("");
}
useEffect(() => {
window.addEventListener("scroll", stickNavbar);
}, []);
return (
<nav className="relative w-full p-4">
<div className={`flex w-full flex-row items-center justify-between ${stickyClass}`}>
navbar content goes here ....
<div/>
<nav/>

我使用tailwindcss的样式，所以没有外部样式表，但是sticky-nav类应用一些tailwindcss的实用程序类。

components.css

/* Navbar */
.sticky-nav {
@apply fixed top-0 left-0 w-full shadow-md z-20;
}

我确实在网上查了一下，但是没有什么真正有用的，真的希望有人能帮助我:)。

Answer 1

试试这个:

import React, { useState, useEffect } from 'react';
export default function Navbar() {
const [stickyClass, setStickyClass] = useState('relative');
useEffect(() => {
window.addEventListener('scroll', stickNavbar);
return () => {
window.removeEventListener('scroll', stickNavbar);
};
}, []);
const stickNavbar = () => {
if (window !== undefined) {
let windowHeight = window.scrollY;
windowHeight > 500 ? setStickyClass('fixed top-0 left-0 z-50') : setStickyClass('relative');
}
};
return <div className={`h-16 w-full bg-gray-200 ${stickyClass}`}>Navbar</div>;
}

演示(没有顺风但结果相同):Stackblitz

Answer 2

您可以在这里找到一个最简单的方法来实现它，而无需使用任何外部库或引导。它甚至可以在动态大小下使用导航栏本身。这个实现使用一个JSX文件和一个css文件，它们保存在相同的目录下，名称如下:navbar.module.css.

这个文件中提供的样式是:

/* Only for setting up the element */
.navbarOffset {
padding: 10em;
}
/* Only for styling */
.content {
background-color: #333;
padding: 0.25em 1em 0.25em 1em;
}
/* Fix the navbar to the screen to create the sticky effect */
.sticky {
position: fixed;
}

你可能会遇到麻烦，导航条在"后面"。滚动条。这样做的原因是您需要定义box-sizing: border-box;以便按预期工作。

import React, { useEffect, useState, useRef } from "react";
// Import the stylesheets
import styles from 'navbar.module.css'

const StickyNavbar = () => {
// All states
const [sticky, setSticky] = useState(false);
const [navHeight, setNavHeight] = useState(0);
// All refs
const navbar = useRef();
const navbarOffset = useRef();
// Mount the Event Listener on loading the site
useEffect(() => {
const handleScroll = () => {
// Get the offset to the top
const value = navbarOffset.current.clientHeight;
// Set the boolean value 
setSticky(window.pageYOffset >= value);
}

window.addEventListener('scroll', handleScroll);
// Set the height of the Navbar
setNavHeight(navbar.current.clientHeight);
// Remove the listener when cleaning up
return () => window.removeEventListener('scroll', handleScroll);
}, []);

return (
<>
<div ref={navbarOffset}>This is the element before!</div>
{/* Always add the content class and only if it is sticky the other class */}
<div ref={navbar} className={`${styles.content} ${sticky && styles.sticky}`}>
I'm the content of the Navbar
</div>
{/* To prevent the next content to "jump" behind the navbar */}
<div style={sticky ? ({ marginTop: navHeight }) : ({})}></div>
</>
)
}
export default StickyNavbar;

我希望这能帮助你!更多的问题，我可以自由地问!