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

为了澄清我想做什么：

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

该图像只是一个示例，它将是一个100%宽的svg，因此图像一离开屏幕就必须再次出现：1px已经出现

我该怎么做

这是我的密码

var offset=$（“#移动元素”）.offset（）；
$（窗口）。滚动（功能（事件）{
var st=$（this.scrollTop（）；
$（“#移动元素”）.css（“左”，st+offset.left）；
});
正文{
高度：9999px
}
#运动元件{
高度：100px；
宽度：100%；
背景：url（'https://vignette.wikia.nocookie.net/nintendo/images/5/5c/Jumping_Mario_Artwork_-_New_Super_Mario_Bros._Wii.png/revision/latest?cb=20120318204810&path-前缀=en’；
背景重复：无重复；
背景尺寸：包含；
背景位置：左下角；
位置：固定；
底部：0；
}
按st%宽度更新变量st，其中宽度为div width。因此，每当它超过div width时，它就会再次自动重置

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

可能重复的