Javascript 用于执行功能的滚动条高度指示器_Javascript_Jquery_Html_Css

Javascript 用于执行功能的滚动条高度指示器

javascript jquery html css

Javascript 用于执行功能的滚动条高度指示器,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我使用jQuery来获取用户的当前高度，当用户达到该高度后，就会有动画功能，比如反应式网站，当用户向下滚动时，页面的不同部分就会有动画然而，我真的不明白为什么下面的代码不能工作 $(window).scroll(function() { var height = $(window).scrollTop(); if(height > 200) { $("#project").animate({ bottom: '250px',

我使用jQuery来获取用户的当前高度，当用户达到该高度后，就会有动画功能，比如反应式网站，当用户向下滚动时，页面的不同部分就会有动画

然而，我真的不明白为什么下面的代码不能工作

$(window).scroll(function() {
    var height = $(window).scrollTop();

    if(height  > 200) {
      $("#project").animate({
        bottom: '250px',
        opacity: '0.5',
        height: '1000px',
        width: '100%'
      });
    }
});

CSS:

HTML:

如何使用滚动高度指示器激活动画等功能？

您需要考虑每个部分的高度并计算滚动底部位置，如果您希望在到达某个元素后触发动画，这可能更有用：

const$about=$'about'； const$projects=$‘projects’； const$services=$‘services’； //计算每个截面的顶部偏移量，每个截面上方的截面数*1000px。 //当我们在它们上面50像素的时候，我们想要扩展它们，所以我们减去它。让projectTop=1000-50；让servicesTop=2000-50； $window.scroll=>{ requestAnimationFrame=>{ //通过对视口高度求和计算滚动底部：常量scrollBottom=$window.scrollTop+$window.height；如果scrollBottom>=projectTop{ $projects.animate{height:'1000px'}； } 如果scrollBottom>=服务停止{ $services.animate{height:'1000px'}； } }; }; 身体{ 保证金：0； } .关于{ 背景：红色；宽度：100%；高度：1000px； } .项目{ 背景：绿色；宽度：100%； } .服务{ 背景：蓝色；宽度：100%； }

/*       About Page        */
.about{
  width: 100%;
  height: 1000px;
  background-color: blue;
}
/*       Projects Page        */
.project{
  background-color: red;
}

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="jquery-3.4.1.min.js"></script>
    <script src="myscripts.js"></script>
    <title>My Portfolio</title>
  </head>
  <body>
    <div id="about" class="about">

    </div>
    <div id="project" class="project">

    </div>
  </body>
</html>