html - 滚动一页后第二个导航栏消失
问题描述
* {
margin: 0;
}
.upnav {
overflow: hidden;
background-color: #99CBFF;
position: sticky;
width: 100%;
height: 56px;
}
.logo {
float: left;
}
.logo img {
margin-top: 8px;
padding-left: 2em;
height: 40px;
width: auto;
}
.lenteSearch button {
float: right;
border: 1.5px;
margin-right: 10px;
margin-top: 8px;
margin-bottom: 8px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border-style: solid;
border-left: white;
background-color: white;
border-color: black;
width: 3.5%;
background-color: white;
height: 40px;
}
.lenteSearch img {
width: 90%;
}
.parolaLogin {
float: right;
margin-right: 15px;
margin-top: 18px;
text-align: center;
font-size: 17px;
}
.parolaLogin a:link {
color: black;
text-decoration: none;
}
.parolaLogin a:visited {
color: black;
text-decoration: none;
}
.ricerca input[type=text] {
float: right;
padding: 6px;
border: 1.5px;
margin-right: 0px;
margin-bottom: 8px;
font-size: 17px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
border-style: solid;
border-color: black;
text-align: left;
margin-top: 8px;
min-height: 40px;
}
.topnav {
float: left;
margin-top: 0px;
overflow: hidden;
background-color: #99CBFF;
width: 100%;
height: 51px;
}
div.topnav {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border-bottom: 3px solid transparent;
}
.topnav a:hover {
border-bottom: 3px solid blue;
}
.topnav a.active {
border-bottom: 3px solid blue;
}
.topnav active {
/* sottolineatura per le varie pagine */
color: blue
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/StileNav.css">
</head>
<body>
<div class="upnav">
<div class="logo">
<a href="capoHome.php"><img src="../IMG/Logo.png" alt="Veneto in mostra"></a>
</div>
<form class="ricerca" action="ricerca.php" method="post">
<div class="lenteSearch">
<button type="submit"><img class="lente" src="../IMG/lente.png"></button>
</div>
<input type="text" placeholder=" Cerca..." name="cerca">
</form>
<div class="parolaLogin">
$ACCEDI$<a href="../PHP/datiUtente.php">$UTENTE$</a> <a href="../HTML/nuoviArticoli.html">$NUOVIARTICOLI$</a>
</div>
</div>
<div class="topnav">
<a href="../PHP/capoHome.php?pagina=$CITTA$">HOME CITTA</a>
<a href="../PHP/capoHome.php?sez=eventi">EVENTI</a>
<a href="../PHP/capoHome.php?sez=teatro">TEATRO</a>
<a href="../PHP/capoHome.php?sez=cucina">CUCINA</a>
<a href="../PHP/capoHome.php?sez=novitá">NOVITÁ</a>
<a href="../PHP/capoHome.php?sez=arte">ARTE</a>
<a href="../PHP/capoHome.php?sez=attrazioni">ATTRAZIONI</a>
<a href="../PHP/capoHome.php?sez=biglietti">BIGLIETTI</a>
<a href="../PHP/capoHome.php?sez=contatti">CONTATTI</a>
</div>
<p>some random text some random text <br>some random text some random <br>text some random textsome <br>random textsome random textsome <br>random textsome random textsome <br>random textsome random <br>textsome random textsome <br>random textsome <br>random textsome <br>random textsome random textsome random textsome <br>random vtextsome random textsome random textsome random textsome vrandom textsome <br>random textsome random textsome random textsome <br>random textsome random <br>textsome <br>random textsome random textsome vrandom <br>textsome random textsome <br>random textsome random textsome <br>random textsome random<br> textsome random text some random text</p>
</body>
</html>
我有 2 个导航栏,我希望第一个导航栏在我向下滚动时消失,第二个导航栏固定在顶部。但它一直有效,直到我滚动“一页”然后第二个导航栏也消失了。哪个是问题?
这是我的代码(2 个导航栏位于 2 个不同的 HTML 文件中):
第一个导航栏:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../CSS/StileNav.css">
</head>
<body>
<div class="topnav">
<a href="../PHP/capoHome.php?pagina=$CITTA$">HOME CITTA</a>
<a href="../PHP/capoHome.php?sez=eventi">EVENTI</a>
<a href="../PHP/capoHome.php?sez=teatro">TEATRO</a>
<a href="../PHP/capoHome.php?sez=cucina">CUCINA</a>
<a href="../PHP/capoHome.php?sez=novitá">NOVITÁ</a>
<a href="../PHP/capoHome.php?sez=arte">ARTE</a>
<a href="../PHP/capoHome.php?sez=attrazioni">ATTRAZIONI</a>
<a href="../PHP/capoHome.php?sez=biglietti">BIGLIETTI</a>
<a href="../PHP/capoHome.php?sez=contatti">CONTATTI</a>
</div>
</body>
</html>
第二个导航栏:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/StileNav.css">
</head>
<body>
<div class="upnav">
<div class="logo">
<a href="capoHome.php"><img src="../IMG/Logo.png" alt="Veneto in mostra"></a>
</div>
<form class="ricerca" action="ricerca.php" method="post">
<div class="lenteSearch">
<button type="submit"><img class="lente" src="../IMG/lente.png"></button>
</div>
<input type="text" placeholder=" Cerca..." name="cerca">
</form>
<div class="parolaLogin">
$ACCEDI$<a href="../PHP/datiUtente.php">$UTENTE$</a> <a href="../HTML/nuoviArticoli.html">$NUOVIARTICOLI$</a>
</div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
}
.upnav {
overflow: hidden;
background-color: #99CBFF;
position: sticky;
width: 100%;
height: 56px;
}
.logo {
float: left;
}
.logo img {
margin-top: 8px;
padding-left: 2em;
height: 40px;
width: auto;
}
.lenteSearch button {
float: right;
border: 1.5px;
margin-right: 10px;
margin-top: 8px;
margin-bottom: 8px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border-style: solid;
border-left: white;
background-color: white;
border-color: black;
width: 3.5%;
background-color: white;
height: 40px;
}
.lenteSearch img {
width: 90%;
}
.parolaLogin {
float: right;
margin-right: 15px;
margin-top: 18px;
text-align: center;
font-size: 17px;
}
.parolaLogin a:link {
color: black;
text-decoration: none;
}
.parolaLogin a:visited {
color: black;
text-decoration: none;
}
.ricerca input[type=text] {
float: right;
padding: 6px;
border: 1.5px;
margin-right: 0px;
margin-bottom: 8px;
font-size: 17px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
border-style: solid;
border-color: black;
text-align: left;
margin-top: 8px;
min-height: 40px;
}
.topnav {
float: left;
margin-top: 0px;
overflow: hidden;
background-color: #99CBFF;
width: 100%;
height: 51px;
}
div.topnav {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border-bottom: 3px solid transparent;
}
.topnav a:hover {
border-bottom: 3px solid blue;
}
.topnav a.active {
border-bottom: 3px solid blue;
}
.topnav active {
/* sottolineatura per le varie pagine */
color: blue
}
解决方案
推荐阅读
- php - 可能未处理的承诺反应(id:2):ReferenceError:找不到变量:responseJson
- python - 如何将矩阵中的符号值提取到新矩阵中
- java - Java 12-GC (JEP 346) 在资源按使用付费的容器环境中,行为是否特别不利?
- dart - 当溢出为溢出时,IconButton 的 onPressed 不会在堆栈小部件内被调用。
- html - Bootstrap textarea 在 Firefox 中添加额外的空格
- sql-server - SQL Server 通过用户定义属性值选择 XML 节点
- c# - 关于Unity中的二段跳和碰撞问题
- sql - 如何从表 1 中获取数据以及另一个表中的 where 条件
- javascript - 是否可以更改 Google 文档查看器错误消息?
- python - ML Engine:将 GCS 文件导入机器的最简单方法