Javascript 我想要一个按钮，在一个粘性标题变成红色向下滚动

大家好，提前谢谢你们的帮助

我正在wordpress网站上工作，我正在使用Elementor和Elementor Pro。 我有一个按钮在一个粘性标题。当人们开始向下滚动时，我希望此按钮变为红色，文本变为白色。以渐进的方式。（当颜色正好相反时。）

现在我有点知道怎么做了，但我不是每件事都很确定。我从媒体上的一篇文章中得到了一个指南，这篇文章是关于把整页变成不同的颜色，我想我可以用一个biut来定位按钮。我对一些编码并不完全陌生，但我遇到了一些不兼容的地方。 我已经在下面的中篇文章中添加了代码

据我所知：

我需要在CSS中制作一个类，即changeColor

并在Javascript中调用此更改

我可以在Elementor中的小部件的自定义CSS部分添加CSS。但是我应该把script.js放在其他文件的哪里呢？WordPress只有.php文件我可以进入，因为我在Elementor工作，我应该或者可以把它放在其他地方吗

我是否将转换时间放在描述按钮的CSS中，还是放在描述更改的CSS中

非常感谢任何能让我更清楚一点的人。谢谢

科林

开始设想：

body {
    background: white;
    transition: 0.3s all;
}

在scroll上需要发生什么

.changeColor {
    background: red;
}

一点Javascript

$(function() {
   $(window).scroll(function () {
      if ($(this).scrollTop() > 50) {
         $(‘body’).addClass(‘changeColor’)
      }
      if ($(this).scrollTop() < 50) {
         $(‘body’).removeClass(‘changeColor’)
      }
   });
});

$（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>50）{
$（'body'）.addClass（'changeColor'））
}
if（$（this）.scrollTop（）<50）{
$（'body'）.removeClass（'changeColor'））
}
});
});

`

---

并在HTML文档中添加一点代码，该文档引用了google托管的javascript库。首先，您应该添加一个id给按钮，以便jquery能够通过它

$(function() {
   $(window).scroll(function () {
      if ($(this).scrollTop() > 50) {
         $(‘body’).addClass(‘changeColor’)
      }
      if ($(this).scrollTop() < 50) {
         $(‘body’).removeClass(‘changeColor’)
      }
   });
});

现在创建一个类，当页面滚动时，将其添加到按钮中

.btnChanged{
    color: white;
    background-color: red;
}

好的，现在创建一个原始JS文件元素，您可以从AddNewElement部分添加它，并将您的JS

    $(function() {
   $(window).scroll(function () {
      if ($(this).scrollTop() > 50) {
         $('#yourId_which_you_gave_to_btn').addClass('btnChanged')
      }
      if ($(this).scrollTop() < 50) {
         $('#yourId_which_you_gave_to_btn').removeClass('btnChanged')
      }
   });
});

$（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>50）{
$（“#您的ID_，您将其提供给了_btn”）.addClass（'btnChanged'）
}
if（$（this）.scrollTop（）<50）{
$（“#yourId_，您将其提供给了_btn”）.removeClass（'btnChanged'）
}
});
});

---

希望这会有所帮助

嗨，@Colin你能告诉我你在使用哪个wordpress编辑器吗？你必须添加一个元素名RAW js，你可以在其中放置脚本，或者你也可以将脚本放在footer.php或header.php中。他们都已经有一个脚本标记将它放在脚本标记中，只是不要将它放在任何functionsthanks@HUSSAIN中！但是我应该把JS脚本放在哪里呢？啊！好的，我试试看。非常感谢！我的荣幸@ColinKassies，希望它能为您服务