2015-03-13 135 views
0

大家好我创建了这个DEMO从codepen io。在这个演示中,你可以看到一切都很好。如果你向下滚动,那么小型头像就会变成大头像。但同时请调整浏览器的大小,然后每次关闭和打开时都可以看到小型化身。有什么人可以告诉我的问题?调整大小头像打开和关闭时调整大小浏览器

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"}); 

}); 

回答

0

在窗口调整开始,删除窗口SCRO ll事件监听器,并在窗口调整大小完成时将其添加回来。

相关问题