Javascript 如何制作<；李>；仅在滚动时出现在导航栏中

我想要一个

内容只出现在卷轴上，我可以借助这个更好地解释

小提琴看起来不好，但让我解释一下。我希望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>

---

JS:

当您滚动页面时，

ul#mynavbar

将获得

topNav

类（当您滚动回顶部时，它将被删除）

可以使用此类显示/隐藏徽标：

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

检查此示例：

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