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