為什么滾動功能沒有在html檔案中的滾動上運行

如您所見，這是我實際想要包含在我的 HTML 檔案中的部分。我想在滾動時改變背景顏色。我無法確定阻止它在我的 HTML 頁面上運行的問題。但它在沙箱中正常運行。但是，當我將代碼添加到我的專案時，代碼不起作用。

有沒有辦法在我的專案中毫無問題地運行它？

網頁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 class="body">
      <div class="panel" 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 class="panel" data-color="violet">
        <h2>Violet panel</h2>
      </div>
      <div class="panel" data-color="indigo">
        <h2>Indigo panel</h2>
      </div>
      <div class="panel" data-color="blue">
        <h2>Blue panel</h2>
      </div>
      <div class="panel" data-color="green">
        <h2>Green panel</h2>
      </div>
      <div class="panel" data-color="yellow">
        <h2>Yellow panel</h2>
      </div>
      <div class="panel" data-color="orange">
        <h2>Orange panel</h2>
      </div>
      <div class="panel" data-color="red">
        <h2>Red panel</h2>
      </div>
    </div>

uj5u.com熱心網友回復：

您的 $body 和 $panel 變數是錯誤的。

放：

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

標籤：查询CSS滚动css动画jquery动画

上一篇：jQueryHTML條件陳述句

下一篇：資料屬性陣列的jQuery選擇器