我试图让我的导航栏在它停留在我主页的顶部之前向上滚动一点。我已将导航栏保存为一个组件,因为我将在整个网站的不同页面上再次使用它。但是,我似乎无法让导航栏粘在我的主页上。有人可以帮我吗?
**Navbar.js**
import React from 'react'
import './style.css';
const Navbar = (props) => {
return(
<div className="page">
<div className="banner"></div>
<div className="navbar-scroll">
<div className="border"></div>
<nav className=" navbar navbar-expand-sm navbar">
<div className="nav-link collapse navbar-collapse">
<ul className="navbar-nav ml-auto">
<li className="nav-item"><a className="nav-link" href="#">Home</a></li>
<li className="nav-item"><a className="nav-link" href="#">About</a></li>
<li className="nav-item"><a className="nav-link" href="#">Blog</a></li>
<li className="nav-item"><a className="nav-link" href="#">Portfolio</a></li>
<li className="nav-item"><a className="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
<div className="border"></div>
<div className="divider-below-nav"></div>
</div>
</div>
)
}
export default Navbar
**Navbar.css**
.page {
position: relative;
}
.border {
left:0;
right:0;
background-color:rgb(136, 133, 133);
height: 4px;
}
a.nav-link {
padding: 1rmb;
text-transform: uppercase;
}
.navbar-expand-sm .navbar-nav .nav-link {
padding-right: 3.5rem;
padding-left: .5rem;
}
.navbar-expand-sm .navbar-nav .nav-link:hover {
color: rgba(70, 66, 66, 0.5);
}
.navbar-nav .nav-link {
color: rgb(56, 55, 55);
}
.divider-below-nav {
min-height: 42px;
background-color: orangered;
}
.banner {
background-color:orange;
height: 24.5vh;
}
.navbar-scroll {
position: sticky;
top: 0;
}
**Home.js**
import React from 'react';
import Navbar from '../../components/Navbar';
import './style.css';
const Home = (props) => {
return(
<div className="body">
<Navbar/>
<div className="divider2"></div>
<div className="divider3"></div>
<div className="divider4"></div>
<div className="divider1"></div>
<div className="divider4"></div>
<div className="divider1"></div>
<div className="divider4"></div>
</div>
)
}
export default Home;
**Home.css**
.divider1 {
min-height: 42px;
background-color: orangered;
}
.divider2 {
min-height: 86px;
background-color: white;
}
.divider3 {
min-height: 42px;
background-color: rgb(221, 196, 151);
}
.divider4 {
min-height: 255px;
background-color: orange;
}
答案 0 :(得分:0)
粘性项目必须是滚动元素的直接子元素。在这种情况下,您的 navbar-scroll
是不滚动的 page
的孩子,它是 body
。
.page {
position: relative;
}
.border {
left:0;
right:0;
background-color:rgb(136, 133, 133);
height: 4px;
}
a.nav-link {
padding: 1rmb;
text-transform: uppercase;
}
.navbar-expand-sm .navbar-nav .nav-link {
padding-right: 3.5rem;
padding-left: .5rem;
}
.navbar-expand-sm .navbar-nav .nav-link:hover {
color: rgba(70, 66, 66, 0.5);
}
.navbar-nav .nav-link {
color: rgb(56, 55, 55);
}
.divider-below-nav {
min-height: 42px;
background-color: orangered;
}
.banner {
background-color:orange;
height: 24.5vh;
}
.navbar-scroll {
position: sticky;
top: 0;
/*you'll need this so menu can have a background when above other elements*/
background: white
}
.divider1 {
min-height: 42px;
background-color: orangered;
}
.divider2 {
min-height: 86px;
background-color: white;
}
.divider3 {
min-height: 42px;
background-color: rgb(221, 196, 151);
}
.divider4 {
min-height: 255px;
background-color: orange;
}
<div class="body">
<div class="navbar-scroll">
<div class="border"></div>
<nav class=" navbar navbar-expand-sm navbar">
<div class="nav-link collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="border"></div>
<div class="divider-below-nav"></div>
</div>
<div class="divider2"></div>
<div class="divider3"></div>
<div class="divider4"></div>
<div class="divider1"></div>
<div class="divider4"></div>
<div class="divider1"></div>
<div class="divider4"></div>
</div>