为什么在我滚动之前似乎没有JavaScript代码？

Question

我刚开始使用javascript，我不明白为什么我的javascript代码不起作用，直到我开始滚动一点（所以我看到我的徽标和我的菜单页面，就像没有Javascript代码）。

$(window).scroll(function() {
  var scrollPos = $(this).scrollTop();
  $(".textLogo").css({
    'font-size': 690 - scrollPos + '%'
  });
});

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  $('.menu').css({
    opacity: function() {
      var elementHeight = $(this).height();
      return 1 - (elementHeight - scrollTop) / elementHeight;
    }
  });
});

.textLogo {
  color: #1C1C1C;
  text-align: center;
  font-size: 110px;
  padding: 120px;
  position: absolute;
  margin-bottom: 800px;
  width: 100%;
}

.menu {
  font-size: 55px;
  text-align: center;
  display: block;
  margin-top: 275px;
  opacity: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

首先，代码只能在body标记的底部工作，因为你没有为DOM内容加载编写一个事件监听器，如果你想把它放在标题或单独的文件中这样写。

document.addEventListener('DOMContentLoaded', function(){
 $(window).scroll(function() {
  var scrollPos = $(this).scrollTop();
  $(".textLogo").css({
   'font-size' : 690 - scrollPos + '%'
  });
 });

 $(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  $('.menu').css({
   opacity: function() {
    var elementHeight = $(this).height();
    return 1 - (elementHeight - scrollTop) / elementHeight;
   }
  });
 })
});

（所以我看到我的徽标和我的菜单页面就像没有Javascript代码）

这是因为在您开始滚动之前，由于您选择使用的事件侦听器，您编写的代码将不会被调用。如果您可以提供要测试的HTML，这将非常有用。

Answer 2

您发布的代码是scroll事件的处理程序，因此在您滚动之前它不会运行。如果要在加载页面时强制它运行，则应在代码中触发滚动事件。

在这种情况下，您还应将其放在$(document).ready()中或将其放在HTML的末尾，以便它引用的元素将被加载到DOM中。

$(document).ready(function() {
  $(window).scroll(function() {
    var scrollPos = $(this).scrollTop();
    $(".textLogo").css({
      'font-size': 690 - scrollPos + '%'
    });
  });

  $(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    $('.menu').css({
      opacity: function() {
        var elementHeight = $(this).height();
        return 1 - (elementHeight - scrollTop) / elementHeight;
      }
    });
  });
  
  $(window).scroll();
});

.textLogo {
  color: #1C1C1C;
  text-align: center;
  font-size: 110px;
  padding: 120px;
  position: absolute;
  margin-bottom: 800px;
  width: 100%;
}

.menu {
  font-size: 55px;
  text-align: center;
  display: block;
  margin-top: 275px;
  opacity: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

$（窗口）.scroll（函数（）

您已使用.scroll函数。这意味着它会在您滚动时激活您的代码。而是使用$（window）.load，以便在窗口加载时发生。希望这可以帮助。