是否可以使用amp滚动绑定效果或amp-position-observer隐藏或显示图像？

Question

<header class="header fixed" style="top: calc(0px);">
   <div class="container">
      <div class="nav-container">
         <div class="left-nav alt">
            <a href="/" class="tab header-title"><span></span></a>                             
         </div>
         <div class="right alt hide-dynamic">
            <div class="tabs">
               <div class="tab">
                  <a href="#">Courses</a>
                  <div class="list-container">
                     <div class="list-shadow"></div>
                     <ul>
                        <li class="has-sublist">
                           <a href="dasm.html">DASM</a>
                        </li>
                        <li>
                           <a href="#dcct.html">DCCT</a>
                        </li>
                        <li class="has-sublist">
                           <a href="datm.html">DATM</a>
                        </li>
                        <li class="has-sublist">
                           <a href="dhotm.html">DHOTM</a>
                        </li>
                     </ul>
                  </div>
               </div>
               <div class="tab">
                  <a href="#">APT 360</a>
                  <div class="list-container">
                     <div class="list-shadow"></div>
                     <ul>
                        <li>
                           <a href="galileo-training.html">GALILEO TRAINING</a>
                        </li>
                        <li>
                           <a href="first-aid-training.html">FIRST-AID TRAINING</a>
                        </li>
                        <li class="external">
                           <a href="swimming-certification.html">SWIMMING CERTIFICATION</a>
                        </li>
                        <li class="external">
                           <a href="gallery.html">Gallery</a>
                        </li>
                        <li>
                           <a href="https://www.aptadvantage.com/thailand-immersion-program">Thailand Immersion Program</a>
                        </li>
                     </ul>
                  </div>
               </div>
               <div class="tab">
                  <a href="#">PLACEMENTS</a>
                  <div class="list-container">
                     <div class="list-shadow"></div>
                     <ul>
                        <li>
                           <a href="placements-highlights.html">HIGHLIGHTS</a>
                        </li>
                        <li>
                           <a href="placements-testimonials.html">TESTIMONIALS</a>
                        </li>
                     </ul>
                  </div>
               </div>
               <div class="tab">
                  <a href="#">APT Live</a>
                  <div class="list-container">
                     <div class="list-shadow"></div>
                     <ul>
                        <li class="external">
                           <a href="live-feed.html">Live Feed</a>
                        </li>
                     </ul>
                  </div>
               </div>
               <div class="tab single-tab">
                  <a href="https://www.aptadvantage.com/blog">Blog</a>
               </div>
               <div class="tab">
                  <a href="#">About Us</a>
                  <div class="list-container">
                     <div class="list-shadow"></div>
                     <ul>
                        <li class="has-sublist">
                           <a href="our-story.html">Our Story</a>
                        </li>
                        <li>
                           <a href="mission-vision.html">Mission Vision</a>
                        </li>
                        <li>
                           <a href="faq.html">FAQ</a>
                        </li>
                        <li class="external">
                           <a href="contact-us.html">Contact Us</a>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
            <a href="know-more.html" class="apt-know hide-dynamic button">Know More</a>
         </div>
      </div>
   </div>
</header>

上面是代码。左侧导航栏包含徽标。以下是徽标的CSS代码。

.header .left-nav .header-title {
         background: url(img/logo.png) center left/100% no-repeat;
         color: #0379c4;
         margin: 0;
         padding: 40px 80px;
         text-transform: none;
         width: auto
         }

因此，当用户开始滚动并显示另一个徽标时，客户端希望隐藏初始徽标。任何帮助都会对我有帮助。所以有可能使用amp scrollbound，amp postion观察器和动态类来做到这一点。谢谢您的阅读。