我想要一个粘性标题中的按钮在向下滚动时变为红色

Question

您好，提前感谢您的所有帮助

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

现在我有点知道该怎么做，但我并不完全确定一切。我从 Medium 上的一篇文章中获得了一个指南，该指南是关于将整个页面变成不同的颜色，我认为我可以用一个 biut 来定位按钮。我对一些编码并不完全陌生，但我遇到了一些不兼容的问题。 我已经从下面的 Medium 帖子中添加了代码。

我知道的：

我需要在 CSS 中创建一个类，即。 .changeColor

并在 Javascript 中调用此更改。

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

我是把过渡时间放在描述按钮的 CSS 中还是放在描述变化的 CSS 中？

非常感谢谁能让我更清楚地了解这一切。谢谢！

科林

开始情况：

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

滚动需要发生什么

.changeColor {
    background: red;
}

一点 Javascript

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

`

并在 HTML 文档中添加一些代码，以引用 google 托管的 JavaScript 库

Answer 1

首先你应该给你的按钮添加一个id，这样jquery就可以通过它

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

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

好的，现在创建一个 RAW JS 文件元素，您可以从添加新元素部分添加它并放入您的 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')
      }
   });
});

希望这会有所帮助