用户滚动时如何更改导航栏的标题颜色？ Prestashop 商店

Question

我想在用户稍微滚动时更改导航栏中的颜色标题。我在 Prestashop 工作，我们可以向其中添加自定义 CSS 和自定义 javascript。

我首先分析了我prestashop主题中导航栏文本的id：

然后我创建了这个小 javascript:

window.onscroll = function() {
    var title= document.getElementById('title-text');
    if ( window.pageYOffset > 100 ) {
        title.classList.add("white_menu");
    } 
}

和这个 css:

.white_menu{
color: white;
}

但它不起作用:/ 我是不是忘记了什么？

提前致谢疾病

Answer 1

在您的 CSS

中添加此样式

.white_menu span {
    color: white;
}

用这个替换你的 JS

window.onscroll = function () {
    var title = document.getElementById('header_menu');
    if (window.pageYOffset > 100) {
        title.classList.add("white_menu");
    } else {
        title.classList.remove("white_menu");
    }
}

用户滚动时如何更改导航栏的标题颜色？ Prestashop 商店

How change titles color of my navbar when the user scrolls ? Prestashop

javascript

css

prestashop