我的元素在滚动条上不可见

Question

我正在尝试使图像在您向下滚动时显示。我尝试了多个版本，但似乎什么也没出现。这是我当前的HTML：

<div class="right">
   <div class="contact">
      <ul class="img">
         <li>
            <a href="mailto:maiverily@gmail.com" title="Email"> 
               <img class="social" src="img/email.svg">
            </a>
         </li>
         <li>
            <a href="https://www.instagram.com/maiverily/" title="Insta">
               <img class="social" src="img/instagram.svg">
            </a>
         </li>
         <li>
            <a href="https://www.linkedin.com/in/mai-walters-372851b6/" title="LinkedIn">
               <img class="social" src="img/linkedin.svg">
            </a>
         </li>
         <li id="resume">
            <a href="resumeNov2018.pdf" title="Resume">
               <img class="social" src="img/resume.svg">
            </a>
         </li>
      </ul>
      <img id="aboutme" class="banner"src="img/aboutme.png">
      <p class="aboutinfo"></p>
      <img id="interests" class="banner"src="img/interests.png">
      <p class="aboutinfo"></p>
      <img id="skills" class="banner"src="img/skills.png">
      <p class="aboutinfo"></p>
   </div>
   <img id="me" src="img/me.png">
   <div class="extender"></div>
</div>

和我当前的Javascript

    $(window).scroll(function(){
        if($(this).scrollTop()>0) {
           $(".aboutme").addClass("visible");
           } 
        else {
            $(".aboutme").removeClass("visible"); 

        }
    });