fixed navbar

This commit is contained in:
heyethereum
2024-05-05 23:09:17 +08:00
parent 3b975d8ec1
commit d2002d97fd
5 changed files with 14 additions and 3578 deletions

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 336 KiB

View File

@@ -13,11 +13,11 @@
<link rel="stylesheet" href="%PUBLIC_URL%/style.css" type="text/css" /> <link rel="stylesheet" href="%PUBLIC_URL%/style.css" type="text/css" />
<link rel="stylesheet" href="%PUBLIC_URL%/css/animate.css" type="text/css" /> <link rel="stylesheet" href="%PUBLIC_URL%/css/animate.css" type="text/css" />
<link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.min.css" type="text/css" /> <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="%PUBLIC_URL%/css/all.css" type="text/css" />
<link rel="stylesheet" href="%PUBLIC_URL%/css/jquery.bxslider.css" type="text/css" /> <link rel="stylesheet" href="%PUBLIC_URL%/css/jquery.bxslider.css" type="text/css" />
<!-- Font Google --> <!-- Font Google -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <!--

View File

@@ -5,7 +5,7 @@ const Header: React.FC = () => {
useEffect(() => { useEffect(() => {
function setFixed() { function setFixed() {
if (window.scrollY > 0) { if (window.scrollY > 50) {
setFix(true); setFix(true);
return; return;
} }
@@ -19,9 +19,9 @@ const Header: React.FC = () => {
}, []); }, []);
return ( return (
<nav className="navbar navbar-expand-lg banner"> <nav className={fix ? "navbar navbar-expand-lg nav-scroll": "navbar navbar-expand-lg banner"}>
<div className="container"> <div className="container">
<img src="../marketing/images/logo.png" alt="logo" width="160" height="80" /> <img src={fix ? "../marketing/images/logo-black.png" : "../marketing/images/logo.png"} alt="logo" width="160" height="80" />
<button <button
className="navbar-toggler" className="navbar-toggler"
type="button" type="button"

View File

@@ -71,6 +71,16 @@ h6 {
display: none; display: none;
} }
.nav-scroll { .nav-scroll {
position: fixed;
right: 0;
left: 0;
width: 100%;
padding-left: 0;
padding-right: 0;
min-height: 50px;
line-height: 50px;
background: transparent;
z-index: 9999999;
background: #fff; background: #fff;
-webkit-box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.0509803922); -webkit-box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.0509803922);
box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.0509803922); box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.0509803922);