Question

我的代码仅在我向下滚动以触发＆＃34; if＆＃34;声明。但是当我不向上滚动而是刷新页面以再次看到效果时 - 它不起作用。每次刷新页面时我都需要代码才能工作，而不仅仅是页面滚动。提前谢谢！

$(document).ready(function(){
  $(window).scroll(function() {
    if ($(document).scrollTop() > 250) {
      $(".main-pic-bg").fadeIn("slow");
      $(".main-pic-bg").fadeIn("slow");
    } else {
      $(".main-pic-bg").hide("slow");
      $(".main-pic-bg").hide("slow");
    }
  });
});

$(document).ready(function(){
  $(window).scroll(function() {
    if ($(document).scrollTop() > 650) {
      $(".fullscreen-bg-video").hide();
      $(".main-pic-bg-title").addClass("load2");
      $(".main-pic-bg-content1").addClass("load2");
    } else {
      $(".fullscreen-bg-video").show("slow");
      $(".main-pic-bg-title").removeClass("load2");
      $(".main-pic-bg-content1").removeClass("load2");
    }
  });
});

Answer 1

尝试重构您的代码：

inner

Answer 2

如果您的意思是每次用户刷新页面或滚动页面时都会执行该代码，那么将代码添加到函数中会更好，只是为了不重复代码两次：

function update() {
    if ($(document).scrollTop() > 250) {
        $(".main-pic-bg").fadeIn("slow");
        $(".main-pic-bg").fadeIn("slow");
    } else {
        $(".main-pic-bg").hide("slow");
        $(".main-pic-bg").hide("slow");
    }

    if ($(document).scrollTop() > 650) {
        $(".fullscreen-bg-video").hide();
        $(".main-pic-bg-title").addClass("load2");
        $(".main-pic-bg-content1").addClass("load2");
    } else {
        $(".fullscreen-bg-video").show("slow");
        $(".main-pic-bg-title").removeClass("load2");
        $(".main-pic-bg-content1").removeClass("load2");
    }
}

然后放置事件：

$(document).ready(function(){
    update();
});

$(window).scroll(function(){
    update();
});

如果您注意到，滚动事件不在ready事件中，那是因为如果是，则只有在页面准备好后滚动才会更新。现在它已分离，它应该按预期工作。

JQuery仅适用于滚动而不适用于页面刷新

2 个答案: