javascript - 如何使 <li> 仅在滚动时出现在导航栏中

Question

我想要一个< li > 内容只出现在滚动条上，我可以借助这个fiddle 更好地解释

fiddle 看起来不太好，但让我解释一下。我希望 xaviers Logo (在白色导航栏上)仅在黑色部分在滚动时出现。当白色导航栏固定时。

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:

Answer 1

当您滚动页面时，ul#mynavbar 获取 topNav 类(当您滚动回到顶部时它会被移除)。

你可以使用这个类来显示/隐藏标志:

.navbar #navlogo {
    display: none;
}
.navbar.topNav #navlogo {
    display: inline-block;
}

检查这个例子:
https://fiddle.jshell.net/8h4jkoq1/