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

Posted 2023-03-06

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

【英文标题】：I would like a button in a sticky header to turn red on downscroll

【发布时间】：2019-08-24 02:57:02

【问题描述】：

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

我正在开发一个 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 库

【问题讨论】：

嗨，@Colin，你能告诉我你使用的是哪个 wordpress 编辑器吗？

【参考方案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')
      
   );
);

希望这会有所帮助

【讨论】：

你必须添加一个元素名称 RAW js，你可以在其中放置你的脚本

或者你也可以把这个脚本放在你的footer.php或header.php中，他们都已经有一个脚本标签把它放在你的脚本标签里只是不要把它放在任何功能中

感谢@HUSSAIN！但是我把 JS 脚本放在哪里呢？

啊！好的，我会尝试的。非常感谢！

我很高兴@ColinKassies，希望它对你有用