逻辑是在滚动时将菜单栏2nd div粘贴,其他div应该放在粘性菜单栏下面。但是在这里,只有3 div滑动横幅重叠到粘滞状态,其他滑动条工作正常。
任何人都可以解决这个问题吗?
所有div都在React Router内部。
CSS
.sticky {
width: 100%;
height: 75px;
color: #61dafb;
background-color: blue;
position: sticky;
top: 0;
}
.slider-main {
width: 100%;
height: 500px;
overflow: hidden;
position: relative;
background-image: url(../images/slide_1.jpg);
background-repeat: no-repeat;
background-size: cover;
animation: slide 10s infinite;
}
@keyframes slide {
0%{
background-image: url(../images/slide_1.jpg);
width: auto;
height: 500px;
}
26%{
width: auto;
height: 500px;
background-image: url(../images/slide_2.jpg);
}
67%{
width: auto;
height: 500px;
background-image: url(../images/slide_3.jpg);
}
}
/* slider text 1*/
.tx-anim-1{
width: 457px;
height: 76px;
margin: auto;
background-image: url(../images/slider-tx-bg.png);
text-align: center;
color:yellow;
font-size: 50px;
position: relative;
animation: mymove1 4s ;
animation-delay: 2s;
animation-fill-mode: both;
}
@keyframes mymove1 {
from {top: -10%;}
to {top: 64%;}
}
/* slider text 2*/
.tx-anim-2{
width: 457px;
height: 35px;
margin-top: 320px;
text-align: center;
background-image: url(../images/slider-tx-bg.png);
color: #54ff00;
font-size: 22px;
position: relative;
animation: mymove2 4s ;
animation-delay: 2s;
animation-fill-mode: both;
}
@keyframes mymove2 {
from {left: -30%;}
to {left: 35%;}
}
/* slider text 3*/
.tx-anim-3{
width: 550px;
height: 35px;
margin-top: 150px;
margin-left: 32%;
background-image: url(../images/slider-tx-bg.png);
text-align: center;
color:yellow;
font-size: 18px;
position: relative;
animation: mymove3 4s ;
animation-delay: 2s;
animation-fill-mode: both;
}
@keyframes mymove3 {
from {bottom: 0%;}
to {bottom: 30%;}
}
第一分区
<div>
<div>
PU AMD AM4 Socket for AMD Ryzen/ AMD Ryzen 2nd Generation/Ryzen with Radeon Vega Graphics/Ryzen 1st
Generation/7th Generation A-series/Athlon X4/Athlon Processors Supports CPU up to 8 cores. The maximum memory frequency
</div>
</div>
第二分区
<div className="mycontainer sticky">
<Navbar className=" site-bg " expand="lg">
<Navbar.Brand>
<div>
<img src={logo} alt="logo" width="200" />
{/* <img src={process.env.PUBLIC_URL + "./images/logo.png"} alt="mypic" width="200" /> */}
</div>
</Navbar.Brand>
<Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
<Navbar.Collapse id="navbar-toggle" bsStyle="tabs" style={{ marginTop: 30 }}>
<Nav className="ml-auto">
<Link className="my-navbar" to="/">Home</Link>
<Link className="my-navbar" to="/about">About</Link>
<Link className="my-navbar" to="/services">Services</Link>
<Link className="my-navbar" to="/contact">Contact</Link>
<Link className="my-navbar" to="/galleries">Galleries</Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
第三分区
<div className="slider-main">
<div className="tx-anim-1">
<div>
Decor and Event
</div>
</div>
<div className="tx-anim-2">
<div style={{ paddingTop: 5 }}>
A management Company
</div>
</div>
<div className="tx-anim-3">
<div style={{ paddingTop: 5 }}>
We promise you the best Deal with full Satisfaction.
</div>
</div>
</div>
第四分区
<div style={{ paddingTop: 50 }}>
<Route defaultActiveKey="/home" path="/" exact render={() => <HomePage title={this.state.home.title} subTitle={this.state.home.subTitle} text={this.state.home.text} />} className="container-full" />
<Route path="/about" render={() => <AboutPage title={this.state.about.title} subTitle={this.state.about.subTitle} text={this.state.about.text} />} />
<Route path="/services" render={() => <ServicesPage title={this.state.services.title} />} />
<Route path="/contact" render={() => <ContactPage title={this.state.contact.title} />} />
<Route path="/galleries" render={() => <GalleriesPage title={this.state.galleries.title} />} />
<Footer />
</div>
这是z-index
的问题,您可以使用CSS轻松管理它。只需在您的类上添加以下CSS属性,您的问题就会得到解决,并且记住我添加了background-color
,因为它显示了,除了滑块全部位于粘滞菜单下。
.mycontainer{
z-index: 100;
background-color: skyblue;
}
.slider-main {
z-index: 101;
}