javascript - 如何在 reactjs 中有一个粘性导航栏
问题描述
我的导航栏隐藏了导航栏下方的内容。此外,它粘在左侧而不是中间部分。我希望有人可以向我展示制作导航栏的正确方法 制作即使在我们滚动时也能保持原位的粘性导航栏的正确方法。
代码沙箱https://codesandbox.io/s/clever-voice-24udr
导航栏.js
import React, { Fragment } from "react";
import { Link } from "react-router-dom";
import { Button } from "react-bootstrap";
const NavbarPage = () => {
const guestLinks = (
<ul>
<li>
<Link to="/">
<Button className="btn btn-primary createNew">Create New</Button>
</Link>
</li>
<li>
<Link to="/about">
<Button className="btn btn-danger signOut">Sign out</Button>
</Link>
</li>
</ul>
);
return (
<nav className="navbar bg-white">
<h3 className="titleName">
<Link to="/">
<i className="fas fa-pen" /> demo
</Link>
</h3>
{guestLinks}
</nav>
);
};
export default NavbarPage;
.navbar {
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.7rem 2rem;
overflow: hidden;
z-index: 1;
width: 88.15%;
margin: auto;
top: 0;
border-bottom: solid 1px var(--primary-color);
opacity: 0.9;
top: 0;
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8),
-12px 0 8px -4px rgba(31, 73, 125, 0.8);
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white,
12px 0 15px -4px rgba(31, 73, 125, 0.8),
-12px 0 15px -4px rgba(31, 73, 125, 0.8);
}
解决方案
只是想知道你可以position: sticky; top: 0
用来做同样的事情。
纯 CSS 会更快
推荐阅读
- cakephp - 如何在 cakephp 模型中从 po 文件中加载翻译的消息
- php - 在奏鸣曲的嵌套模态 crud 中打开 Ckeditor 时未加载
- ios - 如何在开发的实时聊天应用程序中共享一些页面详细信息作为链接
- assembly - 将多个变量连接成一个字符串
- android - 缩放会导致像素化矢量绘图
- javascript - 我的画布中的触摸事件没有按预期工作,我无法确定它不工作的原因
- thymeleaf - 使用 Thymeleaf 3 在自定义属性中转义 & 符号?
- django - 如何在 django 中发送密码重置电子邮件时显示公司名称而不是电子邮件地址
- linux-kernel - 什么是内核映像?为什么它在嵌入式中是强制性的?
- firebase - 如何在 python 中增加 Firestore 字段值?