javascript - 使元素移动，当它在屏幕末尾消失时使其再次出现在屏幕开头

Question

澄清我正在尝试做的事情:

我有一个固定的背景图像，它应该在用户滚动时稍微移动，这已经在工作了。但是当图像消失时，我希望它再次出现在屏幕的开头。

图像只是一个例子，它将是一个 100% 宽的 svg，所以图像必须在离开后立即再次出现在屏幕上:已经 1px。

我该怎么做？

这是我的代码

https://codepen.io/anon/pen/YaMJyG

    var offset = $("#moving-element").offset();
    $(window).scroll(function(event) {
      var st = $(this).scrollTop();
      $("#moving-element").css("left", st + offset.left);
    });

    body {
      height: 9999px
    }
    
    #moving-element {
      height: 100px;
      width: 100%;
      background:   url('https://vignette.wikia.nocookie.net/nintendo/images/5/5c/Jumping_Mario_Artwork_-_New_Super_Mario_Bros._Wii.png/revision/latest?cb=20120318204810&path-prefix=en');
     background-repeat: no-repeat;
      background-size: contain;
      background-position: bottom left;
      position: fixed;
      bottom: 0;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="moving-element">  
    </div>

Answer 1

通过 st%width 更新变量 st，其中 width 是 div 宽度。所以每当 ，它变得超过 div 宽度时，它会再次自动重置

var offset = $("#moving-element").offset();
var width = $("#moving-element").width();
$(window).scroll(function(event) {
  var st = $(this).scrollTop();
  st = st%width;
  $("#moving-element").css("left", st + offset.left);
});