Why scroll functionality is not running on scroll in html file-CodePudding

This is the section I actually want to include in my HTML file, as you can see. I want to alter the backdrop colors when scrolling. I am unable to identify the problem that is preventing it from functioning on my HTML page. But it functions normally in the sandbox. However, the code does not function when I add it to my project.

Is there a way to run it in my project without any problems?

html page head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/scripts/ourstory.js"></script>

$(window)
  .scroll(function () {
    // selectors
    var $window = $(window),
      $body = $(".parent"),
      $panel = $("body");

    // Change 33% earlier than scroll position so colour is there when you arrive.
    var scroll = $window.scrollTop()   $window.height() / 3;

    $panel.each(function () {
      var $this = $(this);

      // if position is within range of this panel.
      // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
      // Remember we set the scroll to 33% earlier in scroll var.
      if (
        $this.position().top <= scroll &&
        $this.position().top   $this.height() > scroll
      ) {
        // Remove all classes on body with color-
        $body.removeClass(function (index, css) {
          return (css.match(/(^|\s)color-\S /g) || []).join(" ");
        });

        // Add class of currently active div
        $body.addClass("color-"   $(this).data("color"));
      }
    });
  })
  .scroll();

.body {
    color: #000;
    background-color: #f4f4f4;
    transition: background-color 1s ease;
  }

  /* panel styles */
  .panel {
    /* min height incase content is higher than window height */
    min-height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: sans-serif;
    /* outline: 10px solid hotpink; */
    
  }

  /* colours */
  .color-violet {
    background-color: #7A4EAB;
  }

  .color-indigo {
    background-color: #4332CF;
  }

  .color-blue {
    background-color: #2F8FED;
  }

  .color-green {
    background-color: #4DCF42;
  }

  .color-yellow {
    background-color: #FAEB33;
  }

  .color-orange {
    background-color: #F19031;
  }

  .color-red {
    background-color: #F2293A;
  }

  /* styling for demo, can ignore */
  .body {
    text-align: center;
    font-size: 120%;
    line-height: 1.618;
  }

  .body h1,
  h2 {
    font-size: 3em;
    letter-spacing: -0.05em;
    line-height: 1.1;
  }

  .body p {
    max-width: 30em;
    margin-bottom: 1.618em;
  }

  .body a {
    color: #4332CF;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
      <div  data-color="white">
        <div>
          <h1>Magic scrolling colours</h1>
          <p>
            Scroll to animate the background colour of the body as              a full height
            panel becomes visible.
          </p>
        </div>
      </div>
      <div  data-color="violet">
        <h2>Violet panel</h2>
      </div>
      <div  data-color="indigo">
        <h2>Indigo panel</h2>
      </div>
      <div  data-color="blue">
        <h2>Blue panel</h2>
      </div>
      <div  data-color="green">
        <h2>Green panel</h2>
      </div>
      <div  data-color="yellow">
        <h2>Yellow panel</h2>
      </div>
      <div  data-color="orange">
        <h2>Orange panel</h2>
      </div>
      <div  data-color="red">
        <h2>Red panel</h2>
      </div>
    </div>

CodePudding user response：

Your $body and $panel variables are wrong.

set:

$body = $(".body"),
$panel = $(".panel");