我正在尝试使导航栏与网站一起滚动,以使其始终可见。
在本地测试时,它非常适合移动设备和台式机。但是,当我在网站上实时发布此代码时,导航栏不会跟随滚动条(仅在移动设备上)。我以为我错过了媒体标签下方的position:sticky属性,但这似乎也无法解决。任何人都可以提供的任何帮助都会很棒,我对此很陌生,所以我可能会遗漏一些明显的东西。另外,如果有一种更简单的方法可以完全做到这一点,请告诉我。
这是我的CSS和HTML:
.nav-toggle{
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: auto;
min-height: 4rem;
line-height: 4rem;
position: sticky;
top: 0;
display:block;
width: 100%;
background-color: #ffffff;
z-index: 2;
}
.links{
float: right;
background-color: #ffffff;
padding-right: 69px;
}
.links a{
text-decoration: none;
font-family: 'Open Sans', sans-serif;
color:#58606C;
line-height: 4rem;
}
label {
font-size: 26px;
line-height: 70px;
margin-right: 40px;
display: none;
color: #63C3EF;
}
#toggle{
display: none;
}
.logo-mobile {
display: block;
float: left;
width: 48px;
margin-left:120px;
line-height: 4rem;
}
@media only screen and (max-width: 700px) {
.nav-toggle{
position: sticky;
top: 0;
}
label {
display: block;
cursor: pointer;
width: 26px;
float: right;
margin-right: 15px;
}
.logo-mobile{
width: 35px;
height: 35px;
line-height: 4rem;
display: block;
float: left;
margin-left: 15px;
padding-top: 15px;
}
.links{
text-align: center;
width: 100%;
display: none;
padding-right: 0;
}
.links a {
clear: right;
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
.links .current { /*the state when the link is active*/
color: #63C3EF;
}
}
#toggle:checked + .links {
display: block;
}
<div class="nav-toggle">
<a href="index.html" class="logo-mobile"> <img src="images/logom@2x.png" alt="KM"></a>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="links">
<a href="work.html">Work</a>
<a href="about.html">About</a>
</div>
</div>