时间戳

首页 > 解决方案 > 我想要一个粘性标题中的按钮在向下滚动时变为红色

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

问题描述

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

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

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

我知道的：

我需要在 CSS 中创建一个类，即。。换颜色

并在 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’)
      }
   });
});

`

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

标签： javascriptphpcsswordpresselementor

解决方案

首先你应该给你的按钮添加一个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')
      }
   });
});

希望这会有所帮助

推荐阅读