我不知道爲什麼這裏的代碼在這裏不起作用,但它可以在我的網站上運行,但是您可以在http://www.bsrp.eu/tijdelijk/index.php處看到它。徽標在不透明後會稍微移動一下:1
基本上會發生什麼,就是如果向下滾動1頁,右上角的小徽標就會出現。從opacity:0
到opacity:1
從1秒鐘。 但是,當它位於opacity:1
時,徽標向右跳1或2個像素。
有沒有辦法解決這個問題?
$(function() {
$(window).bind('scroll', function() {
if ($(window).scrollTop() > (window.innerHeight*0.3)) {
$('.logo-klein').addClass('show').removeClass('fade');
}
else {
$('.logo-klein').removeClass('show').addClass('fade');
}
});
});
.for_extra_scroll{
height: 200vh;
}
.logo{
height: 250px;
padding: .25vh;
float: right;
position: fixed;
right: 20px;
opacity: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.show {
opacity: 1;
}
.fade{
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="for_extra_scroll">
<a href="#header"><img src="http://teachersjobworld.com/employer/upload_logo/sample_logo.png" class="logo"></a>
</div>
,我不認爲我看到它跳。但是如果你在'transition'中把'all'改成'opacity'呢?一旦圖像呈現,我確實看到它「彈出」到位,但這是顯示像這樣小的非常大的圖像的副產品。 http://codepen.io/mcoker/pen/evXpPr –
還有哪些元素在腳本中定位了'.logo-klein類? – happymacarts
我第二個邁克爾的建議。您在70x68左右顯示1210x1182像素圖像。您應該縮小原始圖像,因爲這可以節省更多帶寬並縮短加載時間。 – user31782