Можно ли скрыть или показать изображения с помощью эффектов прокрутки усилителя или наблюдателя положения усилителя? - PullRequest
Новая
       28

Можно ли скрыть или показать изображения с помощью эффектов прокрутки усилителя или наблюдателя положения усилителя?

0 голосов
/ 11 сентября 2018 
<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
         }

Таким образом, клиент хочет скрыть начальный логотип, когда пользователь начинает прокручивать и показывать другой логотип. Любая помощь будет для меня плодотворной и полезной. Так что есть ли возможность сделать это с помощью прокрутки усилителя, наблюдателя положения усилителя и динамических классов. Спасибо за чтение.

...