Попытка использовать jquery, чтобы контент исчезал при прокрутке

Я хочу, чтобы содержимое страницы появлялось при прокрутке вниз и исчезало при прокрутке вверх, я использовал инструкции веб-сайтов (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;
}

Когда я использую это, страница просто отображает все нормально, ничего не исчезает и не становится невидимым.