javascript - 调整浏览器大小时，调整头像的大小

Question

大家好，我是从codepen io创建的DEMO。在此演示中，您可以看到一切正常。如果向下滚动，则小头像代替大头像。但是同时请调整浏览器的大小，然后每次打开和关闭时都可以看到小头像。谁能告诉我那里的问题是什么？

的HTML

<div class="mini-profile-wrapper">
   <div class="mini-profile-img">
      <img src="http://www.designbolts.com/wp-content/uploads/2013/11/Frozen-Movie-poster-payoff-Wallpaper-HD1.jpg">
   </div>
   <p class="profile-name">John Doe</p>
</div>

的CSS

.mini-profile-wrapper{
   display: none;
   float: left;
}

.mini-profile-img{
   display: inline-block;
   width: 80px;
   padding: 5px 5px 0 0;
   overflow: hidden;
   vertical-align: middle;
}

.mini-profile-img img{
   max-width: 100%;
   display: inline-block;
}

.mini-profile-wrapper .profile-name{
   display: inline-block;
   vertical-align: middle;
   font-weight:normal;
   color:#FFF;
   font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
   font-size:20px;  
}

JS

$(window).scroll(function(){
  var scrolled = $(this).scrollTop();
  $(".profil-kapak").css({"top":(scrolled*0.7)+"px"});

});

Answer 1

在启动窗口调整大小时，删除窗口滚动事件侦听器，并在完成窗口调整大小后将其重新添加。