在 Vanilla JS 的滚动问题上添加 Class

Question

我正在为客户编写一个新站点，一旦用户达到 100vh，我想将 class 添加到 div 元素。 我已经给body一个ID“myBody”和我想将class添加到“quoteForm”的ID和“quote-form”的class的div元素这是ZFC35FDC70D5FC679D269EZ883A页面...

<body id="myBody">
  <div id="quoteForm" class="quote-form">
    <div id="quoteFormHead"></div>
    <form action="<?php the_permalink(); ?>" method="post">
      <div id="quoteFormBody">
        <div class="formfullwrapper">
          <input type="text" name="message_fname" placeholder="Enter your full name here...">
        </div>
        <div class="formfullwrapper">
          <input type="email" name="message_email" placeholder="Enter your email address here...">
        </div>
        <div class="formfullwrapper">
          <input type="number" name="message_phone" placeholder="Enter your phone number here...">
        </div>
        <div class="formfullwrapper">
          <textarea name="message_msg" placeholder="Details, please! Audience? Word count? Type of document? Tone? Deadlines? Sensitive content?"></textarea>
        </div>
      </div>
      <div id="quoteFormFooter">
        <div class="formfullwrapper">
          <input type="submit" id="submitform" value="Get my free quote">
        </div>
      </div>
    </form>
  </div>
</body>

如您所见，它是一个非常简单的形式。 下面如果 javascript 逻辑我用来添加 class 名称...

document.addEventListener("DOMContentLoaded", function(){
  var scrollElement = document.getElementById('myBody');
  var scrollElementPos = scrollElement.scrollTop;
  var form = document.getElementById('quoteForm');

  scrollElement.addEventListener('scroll', function(){
    scrollElementPos = scrollElement.scrollTop;
    if(scrollElementPos >= 10){
      form.classList.add("form-fixed");
    } else {
      form.classList.remove("form-fixed");
    }
    console.log(scrollElementPos);
  });
});

目前没有任何事情发生，并且 class 名称未添加到报价单中。 有任何想法吗？ 非常感谢，

菲利普·杜斯

Answer 1

是的，它的卷轴“打开”Window。 这就是我想出的，它是一个梦想......

window.onscroll = function(){
  var top = window.pageYOffset || document.documentElement.scrollTop;
  var form = document.getElementById('quoteForm');
  if (top > 1000) {
    form.classList.add("form-fixed");
  } else {
    form.classList.remove("form-fixed");
  }
}

在 Vanilla JS 的滚动问题上添加 Class

问题描述

1 个解决方案

解决方案1
0 2022-08-01 11:30:31

在 Vanilla JS 的滚动问题上添加 Class

问题描述

1 个解决方案

解决方案1 0 2022-08-01 11:30:31

解决方案1
0 2022-08-01 11:30:31