Question

您好，在此先感谢您的帮助

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

现在我有点知道怎么做，但是我不确定所有事情。我从Medium上的一篇帖子中获得了一个指南，该指南是将整个页面变成一种不同的颜色，我以为我可以按个按钮来定位按钮。我并不完全不熟悉一些编码，但是遇到了一些不兼容性。我已经从下面的“中型”帖子中添加了代码。

我所知道的：

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

并使用Javascript调用此更改。

我可以在Elementor的小部件的自定义CSS部分中添加CSS。但是，如何将script.js放在其余文件中？ WordPress只有.php文件可以进入，而且由于我在Elementor工作，应该还是可以将其放置在其他位置？

我也将过渡时间放在描述按钮的CSS或描述更改的CSS中吗？

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

科林

起点：

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

滚动需要发生什么

.changeColor {
    background: red;
}

一些Java

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

`

并向引用了Google javascript托管库的HTML文档中添加一些代码

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')
      }
   });
});

希望这会有所帮助

我希望粘性标题中的按钮在向下滚动时变为红色

1 个答案: