CSS-Microsoft Edge中的绝对定位生涩

Question

我正在实现滑动滚动功能，以显示/隐藏这样的滚动固定徽标...

var setLogo = function() {
 $('.moveable').each(function() {
    $(this).css('top',
      $('.default').offset().top -
      $(this).closest('.container').offset().top
    );
  });
};
 
$(document).scroll(function() {
  setLogo();
});
 
setLogo();

img {
  width: 200px;
}

.container {
  overflow: hidden;
  position: relative;
  min-height: 600px;
  padding: 1em;
}

.dark {
  background: #333;
}
 
.light {
  background: #fff;
}

.gradient {
  background: #15EA24;
}

.default {
  position: fixed;
}
 
.moveable {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container dark">
  <img src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-light.svg" class="default">
</div>
 
<div class="container light">
  <img src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-dark.svg" class="moveable">
</div>

<div class="container gradient">
  <img src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-gradient.svg" class="moveable">
</div>

除Microsoft Edge之外，在我尝试过的每种浏览器中，一切看起来都很不错。

滚动时，徽标会跳来跳去，通常看起来很生涩。

有人知道为什么会发生这种情况以及是否有解决方法吗？

Answer 1

一个想法，不是使用Javascript，而是使用纯CSS。

下面是一个例子。

诀窍是定位固定的图像，然后裁剪它们。我们需要clip容器的原因是，固定位置将忽略溢出，但不会忽略clip。

  

更新：刚刚在Edge中测试过此功能，就会发现是什么原因造成的。

img {
  width: 200px;
}

.container {
  position: relative;
  height: 600px; 
}

.clipper {
  position: absolute;
  clip: rect(0, auto, auto, 0);
  width: 100%;
  height: 100%;
}

.dark {
  background: #333;
}
 
.light {
  background: #fff;
}

.gradient {
  background: #15EA24;
}


.moveable {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container dark">
  <div class="clipper">
    <img src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-light.svg" class="moveable image1">
  </div>
</div>

 
<div class="container light">
  <div class="clipper">
<img src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-dark.svg" class="moveable image2">
  </div>
</div>


<div class="container gradient">
 <div class="clipper">
  <img src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-gradient.svg" class="moveable image3">
 </div>
</div>

Answer 2

我的解决方案不使用Javascript，将图像发送到后台并设置background-attachment: fixed;可以解决问题：

img {
  width: 200px;
}

.container {
  overflow: hidden;
  position: relative;
  min-height: 600px;
}

.dark {
  background: #333;
}
 
.light {
  background: #fff;
}

.gradient {
  background: #15EA24;
}
 
.img {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
}
.img1 {
    background-image: url('https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-light.svg');
}
.img2 {
    background-image: url('https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-dark.svg');
}
.img3 {
    background-image: url('https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-gradient.svg');
}

<div class="container dark">
    <div src="" class="default img img1"></div>
</div>

<div class="container light">
    <div src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-dark.svg" class="moveable img img2"></div>
</div>

<div class="container gradient">
    <div src="https://www.marcoguglie.it/Codepen/SlipScrollEffect/img/skateboard-dark.svg" class="moveable img img3"></div>
</div>

希望获得帮助。

Answer 3

我尝试通过MS Edge和Chrome来解决此问题。

如果直接从Stack Overflow代码段中运行代码，我发现该问题仅是可解决的。但是，如果您在MS Edge或Chrome中本地运行代码，则运行起来会很流畅。

下面是堆栈溢出代码段中的测试结果。

MS Edge中的输出（Microsoft Edge 42.17134.1.0 / Microsoft EdgeHTML 17.17134）：

chrome中的输出：

因此，您可以看到，如果直接在浏览器中运行代码，则运行正常。我建议您站在一边进行测试，并告知我们您的测试结果。