In dieser Sitzung erstellen wir eine Sticky-Navigationsleiste mit Tailwind CSS und React JS.
Sie können den Installationsprozess für React und Tailwind CSS im vorherigen Artikel sehen
Lassen Sie uns sofort den Code für die Navigationsleiste erstellen
Erstellen Sie HTML für die Navbar-Anzeige
<React.Fragment>
<nav className={`fixed inset-x-0 top-0 z-50 flex items-center justify-center h-[60px] py-3 [&.is-sticky]:bg-white border-b border-slate-200 [&.is-sticky]:shadow-lg [&.is-sticky]:shadow-slate-200/25 navba ${navClass}`} id="navbar">
<div className="container 2xl:max-w-[90rem] px-4 mx-auto flex items-center self-center w-full">
<div className="mx-auto">
<ul id="navbar7" className={`absolute inset-x-0 z-20 items-center py-3 bg-white shadow-lg dark:bg-zink-600 dark:md:bg-transparent md:z-0 navbar-menu rounded-b-md md:shadow-none md:flex top-full ltr:ml-auto rtl:mr-auto md:relative md:bg-transparent md:rounded-none md:top-auto md:py-0`}>
<li>
<a href="#home"
className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Home" ? "active" : ""}`}
onClick={() => handleLinkClick("/Home")}
>
Home</a>
</li>
<li>
<a href="#features"
className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Features" ? "active" : ""}`}
onClick={() => handleLinkClick("/Features")}
>
Layanan Kami</a>
</li>
</ul>
</div>
</div>
</nav>
<section className="relative mt-[60px] h-[800px] bg-yellow-600" id="home">
<div className="flex items-center justify-center h-full">
HOME
</div>
</section>
<section className="relative h-[800px] bg-green-600" id="features">
<div className="flex items-center justify-center h-full">
FEATURES
</div>
</section>
</React.Fragment>
Nach dem Login kopieren
Scroll-Funktion
Diese Funktion wird verwendet, um den Status der Navigationsleiste auf „Sticky“ zu ändern und außerdem flüssige Animationen hinzuzufügen, damit der Seitenwechselvorgang reibungslos verläuft
const [navClass, setNavClass] = React.useState<string>('');
const scrollNavigation = () => {
var scrollUp = document.documentElement.scrollTop;
if (scrollUp >= 50) {
setNavClass('is-sticky');
} else {
setNavClass('');
}
};
React.useEffect(() => {
window.addEventListener('scroll', scrollNavigation, true);
document.documentElement.classList.add("overflow-x-hidden", "scroll-smooth", "group");
return () => {
window.removeEventListener('scroll', scrollNavigation, true);
document.documentElement.classList.remove("overflow-x-hidden", "scroll-smooth", "group");
};
}, []);
Nach dem Login kopieren
Aktive Menüfunktion einstellen
Diese Funktion dient dazu, die aktive Klasse im Menü zu ändern und leitet die Seite entsprechend dem Menü, auf das zugegriffen wird
const [activeLink, setActiveLink] = React.useState<string>("/Home");
const handleLinkClick = (target: string) => {
setActiveLink(target);
};
Nach dem Login kopieren
Das vollständige Skript lautet wie folgt
import React from "react"
function App() {
const [navClass, setNavClass] = React.useState<string>('');
const scrollNavigation = () => {
var scrollUp = document.documentElement.scrollTop;
if (scrollUp >= 50) {
setNavClass('is-sticky');
} else {
setNavClass('');
}
};
React.useEffect(() => {
window.addEventListener('scroll', scrollNavigation, true);
document.documentElement.classList.add("overflow-x-hidden", "scroll-smooth", "group");
return () => {
window.removeEventListener('scroll', scrollNavigation, true);
document.documentElement.classList.remove("overflow-x-hidden", "scroll-smooth", "group");
};
}, []);
const [activeLink, setActiveLink] = React.useState<string>("/Home");
const handleLinkClick = (target: string) => {
setActiveLink(target);
};
return (
<React.Fragment>
<nav className={`fixed inset-x-0 top-0 z-50 flex items-center justify-center h-[60px] py-3 [&.is-sticky]:bg-white border-b border-slate-200 [&.is-sticky]:shadow-lg [&.is-sticky]:shadow-slate-200/25 navba ${navClass}`} id="navbar">
<div className="container 2xl:max-w-[90rem] px-4 mx-auto flex items-center self-center w-full">
<div className="mx-auto">
<ul id="navbar7" className={`absolute inset-x-0 z-20 items-center py-3 bg-white shadow-lg dark:bg-zink-600 dark:md:bg-transparent md:z-0 navbar-menu rounded-b-md md:shadow-none md:flex top-full ltr:ml-auto rtl:mr-auto md:relative md:bg-transparent md:rounded-none md:top-auto md:py-0`}>
<li>
<a href="#home"
className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Home" ? "active" : ""}`}
onClick={() => handleLinkClick("/Home")}
>
Home</a>
</li>
<li>
<a href="#features"
className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Features" ? "active" : ""}`}
onClick={() => handleLinkClick("/Features")}
>
Layanan Kami</a>
</li>
</ul>
</div>
</div>
</nav>
<section className="relative mt-[60px] h-[800px] bg-yellow-600" id="home">
<div className="flex items-center justify-center h-full">
HOME
</div>
</section>
<section className="relative h-[800px] bg-green-600" id="features">
<div className="flex items-center justify-center h-full">
FEATURES
</div>
</section>
</React.Fragment>
)
}
export default App
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonVollständige Anleitung zum Erstellen einer Sticky Navbar für eine bessere Navigation in React JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
