尝试使用jquery使内容在滚动时淡入

Question

我希望页面内容在向下滚动时淡入，在向上滚动时淡出，我使用了网站说明（ https://www.superhi.com/blog/how-to-add-web-design-elements-that -fade-in-and-out-on-scroll ），并尝试对其进行一些更改以适合我的项目，但无法正常工作。 我正在使用Dreamweaver。

<script src="jquery-3.4.1.min.js"></script> 
<script src="fadein.js"></script>   
<script>

$(document).on("scroll", function () {
  var pageTop = $(document).scrollTop()
  var pageBottom = pageTop + $(window).height()
  var tags = $(".fade")

  for (var i = 0; i < tags.length; i++) {
    var tag = tags[i]

    if ($(tag).position().top < pageBottom) {
      $(tag).addClass("visible")
    } else {
      $(tag).removeClass("visible")
    }
  }
})

</script>   

<div id="content" style="margin:-8px;">
    <img src="images/n intro.jpg" style="width: 100%; margin-top:110px;" alt="intro image">
    <img class="fade" src="images/border.png" style="width:490px;  margin:40px; margin-left: 35%" alt="border line">

    <div id="mid">
    <h1  class="fade">Whether youre in it for...</h1>
    <img class="fade" src="images/photos/food&drink2.jpg" alt="picture of artistic coffee being made">  
    <p class="fade">The food and drink,</p>
    <img class="fade" src="images/photos/work2.jpg" alt="picture of laptop at a coffee table">
    <p class="fade">Getting some work done,</p>
    <img class="fade" src="images/photos/people2.jpg" alt="picture of a couples hands holding coffee">
    <p class="fade">The people,</p>
    <img class="fade" src="images/photos/book2.jpg" alt="picture of a book and coffee">
    <p class="fade">Or a good book,</p>
    <h2 class="fade">We got you covered!</h2>
    </div>

    <img class="fade" src="images/awards.png" style="display: block; margin-left:auto; margin-right: auto; width: 460px;" alt="three award icons">
    <ul>
        <li class="fade">Sustainable high quality coffee</li>
        <li class="fade">Comfortable seating</li>
        <li class="fade">A variety of table layouts to suit your needs</li>
        <li class="fade">High speed internet </li>
        <li class="fade">Charging ports provided</li>
    </ul>

</div>

.fade {
  opacity: 0;
}

.fade.visible {
  opacity: 1;
}

当我使用此页面时，该页面只会正常显示所有内容，没有任何东西褪色或不可见。

Answer 1

该代码存在一些问题：

1. 您指向jQuery的链接未指向实际的jQuery。 我看了教程，是的，这就是它们的用途，但是您需要使用CDN链接： <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2. fade.js只是他们用来放置所包含script的名称。 您不一定需要。
3. 您需要将transition属性添加到.fade类， .fade ，您将看不到它的淡入或淡出，只需将其从0 opacity切换为1（或完整）即可。

 $(document).on("scroll", function () { var pageTop = $(document).scrollTop() var pageBottom = pageTop + $(window).height() - 20 var tags = $(".fade") for (var i = 0; i < tags.length; i++) { var tag = tags[i] if ($(tag).position().top < pageBottom) { $(tag).addClass("visible") } else { $(tag).removeClass("visible") } } }); 

 .fade { opacity: 0; transition: all .3s ease; } .fade.visible { opacity: 1; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="content" style="margin:-8px;"> <img src="images/n intro.jpg" style="width: 100%; margin-top:110px;" alt="intro image"> <img class="fade" src="images/border.png" style="width:490px; margin:40px; margin-left: 35%" alt="border line"> <div id="mid"> <h1 class="fade">Whether youre in it for...</h1> <img class="fade" src="images/photos/food&drink2.jpg" alt="picture of artistic coffee being made"> <p class="fade">The food and drink,</p> <img class="fade" src="images/photos/work2.jpg" alt="picture of laptop at a coffee table"> <p class="fade">Getting some work done,</p> <img class="fade" src="images/photos/people2.jpg" alt="picture of a couples hands holding coffee"> <p class="fade">The people,</p> <img class="fade" src="images/photos/book2.jpg" alt="picture of a book and coffee"> <p class="fade">Or a good book,</p> <h2 class="fade">We got you covered!</h2> </div> <img class="fade" src="images/awards.png" style="display: block; margin-left:auto; margin-right: auto; width: 460px;" alt="three award icons"> <ul> <li class="fade">Sustainable high quality coffee</li> <li class="fade">Comfortable seating</li> <li class="fade">A variety of table layouts to suit your needs</li> <li class="fade">High speed internet </li> <li class="fade">Charging ports provided</li> </ul> </div> 

这是一个玩弄的小提琴： https : //jsfiddle.net/t4Ljnk7v/1/

我更新了pageBottom变量，以便在到达底部时可以看到底部元素逐渐消失。