尝试使用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>

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