为什么我不能将这个变量从未定义设置为我在条件语句中捕获的数据？

Question

我想做的是，一旦元素出现在浏览器中，就根据滚动顶部的移动来移动元素。我正在尝试捕获初始滚动顶部值并将其保存用于对象的一些数学运算。问题是我的变量仍然未定义，即使它似乎是在函数中设置的。

我正在使用多个滚动功能，这和/或范围可能是我的问题。

jQuery(document).ready(function($){

  //function that indicates object is in view
  $.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    return elementBottom > viewportTop && elementTop < viewportBottom;
  };

  //add class when object in is view
  jQuery(window).bind('scroll',function(e){
    if ($('.home-col-01-image').isInViewport()) {
      $('.home-col-01-image').addClass("in-view")
    } else {
      $('.home-col-01-image').removeClass("in-view")
    }
  });

  //use scrollTop to move object in parallel
  jQuery(window).bind('scroll',function(e){
    if ($(".home-col-01-image").hasClass("in-view")) {
      console.log("First initialSt: " + initialSt )
      if(initialSt == undefined) {
        var initialSt = $(this).scrollTop();
        console.log("Set initialSt: " + initialSt )
      } else {
        console.log("not set initialSt: " + initialSt)
      }
      //console.log("in: ")
      var st = $(this).scrollTop();
      var nst = st - initialSt;
      //var nst = Math.abs(initialSt - st)
      console.log("Use initialSt: " + initialSt)
      console.log("scrollTop: " + st)
      console.log("New scrollTop: " + nst)
      if ((nst<=170) && (nst>=0)) {
        $(".home-col-01-image").css("bottom", + nst);
      }
    } else {
      //console.log("out: ")
    }

 });



});

这是控制台的示例。第一次出现的“First initialSt”应该是未定义的，但第二次出现的则不应。我正在设置该变量并将其输出到“Set initialSt”，但是当它返回时它仍然是未定义的。

First initialSt: undefined
Set initialSt: 1047
Use initialSt: 1047
scrollTop: 1047
New scrollTop: 0
First initialSt: undefined
Set initialSt: 1048
Use initialSt: 1048
scrollTop: 1048
New scrollTop: 0

我的问题是变量没有被设置，不一定是我的代码有多垃圾，或者我如何才能做得更好。

这是我的第一个堆栈问题，所以请让我知道我是否应该解释更多或更少。谢谢！

Answer 1

您需要将

initialSt

的声明移出事件处理函数，以便它将在调用之间持续存在。

也是 2024 年了。使用最新的 jQuery 方法，并使用

let

而不是

var

来声明变量。

jQuery(document).ready(function($) {

  //function that indicates object is in view
  $.fn.isInViewport = function() {
    let elementTop = $(this).offset().top;
    let elementBottom = elementTop + $(this).outerHeight();
    let viewportTop = $(window).scrollTop();
    let viewportBottom = viewportTop + $(window).height();
    return elementBottom > viewportTop && elementTop < viewportBottom;
  };

  //add class when object in is view
  $(window).on('scroll', function(e) {
    if ($('.home-col-01-image').isInViewport()) {
      $('.home-col-01-image').addClass("in-view")
    } else {
      $('.home-col-01-image').removeClass("in-view")
    }
  });

  let initialSt;
  
  //use scrollTop to move object in parallel
  $(window).on('scroll', function(e) {
    if ($(".home-col-01-image").hasClass("in-view")) {
      console.log("First initialSt: " + initialSt)
      if (initialSt === undefined) {
        initialSt = $(this).scrollTop();
        console.log("Set initialSt: " + initialSt)
      } else {
        console.log("not set initialSt: " + initialSt)
      }
      //console.log("in: ")
      let st = $(this).scrollTop();
      let nst = st - initialSt;
      //var nst = Math.abs(initialSt - st)
      console.log("Use initialSt: " + initialSt)
      console.log("scrollTop: " + st)
      console.log("New scrollTop: " + nst)
      if ((nst <= 170) && (nst >= 0)) {
        $(".home-col-01-image").css("bottom", +nst);
      }
    } else {
      //console.log("out: ")
    }
  });
});