Question

有人可以帮我调试一下，当offsetTop = window.pageYOffset时，为什么该if语句不将类列表添加到translationX吗？控制台中没有错误，所以我不明白为什么它不起作用。如果我在开始滚动时仅使用classList添加类，则它起作用，但是当我尝试使其仅出现在具有数据值的节上时，它将无法起作用。

这是我的JavaScript

const sections = document.querySelectorAll("section")
const clientTag = document.querySelector("h2.about")
const p02Tag = document.getElementById("p02")


document.addEventListener("scroll", function () {
  const pixels = window.pageYOffset

  sections.forEach(section => {
    if(section.offsetTop - 400 <= pixels) {
      clientTag.innerHTML = section.getAttribute("data-client")

//this if statement is the one currently not working. 
      if (section.hasAttribute("data-seen-2")) {
      p02Tag.classList.add("move")
    } else {
      p02Tag.classList.remove("move")
    }

    }
  })

})

Css

div.work-info li.move {
  transform: translateX(20px);
}

HTML

  <div class="work-info">
    <ul>
      <li data-number="FN-UP Magazine" data-seen-1="yes"><a href=#">01<a></li>

      <li id="p02" data-number="Cameron Tidball-Sciullo" data-seen-2="yes"><a href="#">02</a></li>

      <li data-number="Jacob Truax" data-seen-3="yes"><a href="#">03</a></li>

      <li data-number="Alexander Romero" data-seen-4="yes"><a href="#">04</a></li>
    </ul>
  </div>

  <section class="work-page" data-client="FN-UP Magazine">
    <div class="content">
    <article class="col-1">
      <img src="lib/fn-up.png">
    </article>
    <article class="col-2">
      <img src="lib/fn-up.png">
    </article>
    <article class="col-3">
      <img src="lib/fn-up.png">
    </article>
    <article class="col-4">
      <img src="lib/fn-up.png">
    </article>
  </section>

  <section class="work-page" data-client="Cameron Tidball-Sciullo">
    <div class="content">
    <article class="col-5">
      <img src="lib/alex.png">
    </article>
    <article class="col-6">
      <img src="lib/alex.png">
    </article>
    <article class="col-7">
      <img src="lib/alex.png">
    </article>
    <article class="col-8">
      <img src="lib/alex.png">
    </article>

  </section>

  <section class="work-page" data-client="Jacob Truax">
    <div class="content">
    <article class="col-9">
      <img src="lib/old.png">
    </article>
    <article class="col-10">
      <img src="lib/old.png">
    </article>
    <article class="col-11">
      <img src="lib/old.png">
    </article>
    <article class="col-12">
      <img src="lib/old.png">
    </article>

  </section>

  <section class="work-page" data-client="Alexander Romero">
    <div class="content">
    <article class="col-13">
      <img src="lib/alex.png">
    </article>
    <article class="col-14">
      <img src="lib/alex.png">
    </article>
    <article class="col-15">
      <img src="lib/alex.png">
    </article>
    <article class="col-16">
      <img src="lib/alex.png">
    </article>

  </section>

  <footer class="footer">
    <h2 class="about">FN-UP Magazine</h2>
  </footer>

</div>
</div>
</body>

Answer 1

没有带有属性section的{{1}}标记，因此data-seen-2子句永不匹配

if

具有该属性的唯一标签是

if (section.hasAttribute("data-seen-2")) {

使用hasAttribute和offsetTop

1 个答案: