徽标在不透明后会稍微移动一下：1

我不知道为什么这里的代码在这里不起作用，但它可以在我的网站上运行，但是您可以在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>

来源

2017-04-03 Minegolfer

，我不认为我看到它跳。但是如果你在'transition'中把'all'改成'opacity'呢？一旦图像呈现，我确实看到它“弹出”到位，但这是显示像这样小的非常大的图像的副产品。 http://codepen.io/mcoker/pen/evXpPr –

还有哪些元素在脚本中定位了'.logo-klein类？ – happymacarts

我第二个迈克尔的建议。您在70x68左右显示1210x1182像素图像。您应该缩小原始图像，因为这可以节省更多带宽并缩短加载时间。 – user31782

这个问题似乎因此为了解决它，你可以将此片段添加到你的CSS要与抗锯齿相关：

img { 
    image-rendering: optimizeSpeed; 
    image-rendering: -moz-crisp-edges;   /* FF 3.6+ */ 
    image-rendering: -o-crisp-edges;   /* Opera 28+ */ 
    image-rendering: -webkit-optimize-contrast; /* Chrome 41+ (and Safari 6+) */ 
    image-rendering: optimize-contrast;   /* CSS3 Proposed */ 
    -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ 
}

来源

2017-04-03 15:33:42

感谢这工作。 – Minegolfer

我还没有找到实际的原因，但尚未改变transition-property: all只有不透明度（tansition: opacity 1s ease）似乎来解决这个问题。

来源

2017-04-03 15:15:13 user31782

这工作，但我不得不选择，对不起:) – Minegolfer

@Minegolfer另一个答案是相当翔实。我也不知道。 – user31782

徽标在不透明后会稍微移动一下：1

回答

相关问题