[英]How to make a <li> appear in navigation bar only on scroll
我想要一個 < li > 內容只出現在滾動條上,我可以在這個小提琴的幫助下更好地解釋
小提琴看起來不太好,但讓我解釋一下。 我希望 xaviers 徽標(在白色導航欄上)僅在黑色部分在滾動時出現。 當白色導航欄固定時。
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!--Navigation bar start -->
<div class="navbar1">
<ul class="navbar" id="mynavbar">
<li><img src="xavierslogo.png" alt="Xaviers logo" id="navlogo"></li>
<li><a href="#home">Home</a></li>
<li><a href="#news">Text one</a></li>
<li><a href="#news">Text two</a></li>
<li class="dropdown">
<a href="" class="dropbtn">Dropdown ▼</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
</li>
</ul>
<div>
<!--Navigation bar end -->
<header class="topbg">
<img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo">
<img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext">
</header>
z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>
CSS:
body {
width: 100%;
height: 100%;
margin:0px;
}
/* Navigation bar logo start */
.navbar li #navlogo {
width: 40px;
height: auto;
}
/* Navigation bar logo end */
/* Navigation bar start */
.navbar1 {
position: absolute;
top: 0px;
width: 100%;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.navbar li {
float: left;
}
li a, .dropbtn{
display: inline-block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: #333;
color: #f2f2f2;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
/* Navigation bar end */
/* Navigation bar fixed on scroll start */
.topNav {
position: fixed;
top: 0;
width: 100%;
}
/* top logo start */
.xavierslogo {
max-width: 1100px;
height: 909px;
padding: 100px;
position: relative;
width: 100%;
height: auto;
left: 50px;
}
.xavierstext {
max-width: 600px;
max-height: 45px;
width: 100%;
height: auto;
position: relative;
left: -18px;
top: 0px;
}
.topbg {
background-color: #333;
background-image: url('images/1.jpg');
position: 0px;
background-position: right;
background-size: auto 190px;
}
/* top logo end */
/* Navigation bar fixed on scroll end */
JS:
當您滾動頁面時, ul#mynavbar
獲得topNav
類(當您滾動回頂部時它會被刪除)。
您可以使用此類來顯示/隱藏徽標:
.navbar #navlogo {
display: none;
}
.navbar.topNav #navlogo {
display: inline-block;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.