Javascript 简单jQuery视差

我需要调试这个jQuery的帮助，在jQuery中，我操作容器中元素的上边距，将其设置为固定大小，并将溢出设置为隐藏，以便创建视差效果。视差可以工作，但是如果你向下滚动一个像素，然后重新加载页面，它就会中断。有人能帮我解决这个问题吗？这是密码

//Parallax for Header
$(window).on("load", function() {
    var startingScrollTop = parseInt($(window).scrollTop());
    console.log(startingScrollTop);
    var startingElementTop = parseInt($headerText.css("margin-top"));
    console.log(startingElementTop);
    $(window).on("scroll", function() {
        var currentScrollTop = parseInt($(window).scrollTop());
        console.log(currentScrollTop);
        if(currentScrollTop > startingScrollTop) {
            var scrollDistance = currentScrollTop - startingScrollTop;
            console.log(scrollDistance);
            var parallaxDistance = scrollDistance / 2;
            console.log(parallaxDistance);
            var newElementMarginTop = startingElementTop + parallaxDistance;
            console.log(newElementMarginTop);
            $headerText.css("margin-top", newElementMarginTop + "px");
        } else if(currentScrollTop <= "0") {
            $headerText.css("margin-top", "0px");
        }
    });
});

---

谢谢你的帮助。

我想出来了，但是我怎样才能简化它呢

//Parallax for Header
$(window).on("load", function() {
  var startingScrollTop = 0;
  console.log(startingScrollTop);
  var startingElementTop = parseInt($headerText.css("margin-top"));
  console.log(startingElementTop);
  //Re-use this on scroll
  var currentScrollTop = parseInt($(window).scrollTop());
  console.log(currentScrollTop);
  if(currentScrollTop > startingScrollTop) {
    var scrollDistance = currentScrollTop - startingScrollTop;
    console.log(scrollDistance);
    var parallaxDistance = scrollDistance / 2;
    console.log(parallaxDistance);
    var newElementMarginTop = startingElementTop + parallaxDistance;
    console.log(newElementMarginTop);
    $headerText.css("margin-top", newElementMarginTop + "px");
  } else if(currentScrollTop <= "0") {
    $headerText.css("margin-top", "0px");
  }
  //Put the re-used code here
  $(window).on("scroll", function() {
    var currentScrollTop = parseInt($(window).scrollTop());
    console.log(currentScrollTop);
    if(currentScrollTop > startingScrollTop) {
      var scrollDistance = currentScrollTop - startingScrollTop;
      console.log(scrollDistance);
      var parallaxDistance = scrollDistance / 2;
      console.log(parallaxDistance);
      var newElementMarginTop = startingElementTop + parallaxDistance;
      console.log(newElementMarginTop);
      $headerText.css("margin-top", newElementMarginTop + "px");
    } else if(currentScrollTop <= "0") {
      $headerText.css("margin-top", "0px");
    }
  });
});

---

我可以将重复使用的代码转换成一个可以在加载、滚动或任何其他处理程序上运行的函数吗？

再次，没关系，我完成了：

对于所有渴望的人：

//Parallax for Header
$(window).on("load", function() {
  var startingScrollTop = 0;
  console.log(startingScrollTop);
  var startingElementTop = parseInt($headerText.css("margin-top"));
  console.log(startingElementTop);
  //Re-use this on scroll
  function parallaxify() {
    var currentScrollTop = parseInt($(window).scrollTop());
    console.log(currentScrollTop);
    if(currentScrollTop > startingScrollTop) {
      var scrollDistance = currentScrollTop - startingScrollTop;
      console.log(scrollDistance);
      var parallaxDistance = scrollDistance / 2;
      console.log(parallaxDistance);
      var newElementMarginTop = startingElementTop + parallaxDistance;
      console.log(newElementMarginTop);
      $headerText.css("margin-top", newElementMarginTop + "px");
    } else if(currentScrollTop <= "0") {
      $headerText.css("margin-top", "0px");
    }
  }
  parallaxify();
  $(window).on("scroll", function() {
    //Put the re-used code here
    parallaxify();
  });
});

---

在运行滚动之前，需要检测当前位置。这就是它断裂的原因。您需要添加检查当前位置的条件。由于您使用的是固定位置，因此它将随滚动条移动，但其顶部位置仍会更改。除非您先检查顶部位置，然后编写if-top>0的if语句，然后再编写else语句。此外，对其进行微调也会非常有帮助。我实际上认为您应该将startingScrollTop=0。重新加载页面时，默认情况下浏览器会自动滚动到您的最后一个位置，并使您的开始位置反映该位置。如果您一直向下滚动页面，则刷新后将根本不会获得任何动画。