滚动一页后，第二个导航栏消失

时间：2018-08-29 09:04:14

标签： html css navbar sticky 

* {
    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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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&aacute">NOVIT&Aacute;</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个不同的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&aacute">NOVIT&Aacute;</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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
}

0 个答案:

没有答案
相关问题
最新问题