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

在窗口调整大小开始时，删除窗口滚动事件侦听器，并在窗口调整大小完成后将其添加回来。

调整浏览器大小时调整头像的开启和关闭大小

1 个答案: