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

为了弄清楚我要做什么：

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

图像只是一个例子，它将是一个svg，宽度为100％，因此图像一旦离开就必须再次出现在屏幕上：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>

最佳答案

通过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);
});

关于javascript - 使元素移动，当元素消失在屏幕末端时，使其再次出现在屏幕开头，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49797243/