如何复用现有CSS实现滚动时Nav-Bar导航菜单文字颜色变更

实现说明 #

完全可以复用现有Header滚动状态的判定逻辑，Elementor的粘性组件会在滚动触发效果时自动给Header添加.elementor-sticky--effects类，你只需要基于这个类的状态给导航菜单文字增加对应样式即可。

改造后的完整CSS代码 #

/* 原有Header背景样式，不需要可以删除 */
selector.elementor-sticky--effects{
    background-color: rgba(255,255,255,1)!important
}
selector{
    transition: background-color 1s ease !important;
}
selector.elementor-sticky--effects >.elementor-container{
    min-height: 70px;
}
selector > .elementor-container{
    transition: min-height 1s ease !important;
}

/* 新增导航文字样式 */
/* 默认状态（Header透明时）的导航文字颜色，示例为白色，可自行修改 */
.elementor-nav-menu a {
    color: #fff !important;
    /* 加过渡效果，和Header动画同步平滑切换 */
    transition: color 1s ease !important;
}
/* 滚动触发粘性效果时的导航文字颜色，使用你提供的深蓝色 */
selector.elementor-sticky--effects .elementor-nav-menu a {
    color: #001C38 !important;
}

注意事项 #

• 代码里的selector是Elementor自定义CSS里的默认占位符，直接在Header组件的自定义CSS框里粘贴即可，不需要修改
• 你可以调整两个color属性的色值匹配自己的设计需求，transition的时长和原有Header的动画保持一致就能实现完全同步的切换效果

内容的提问来源于stack exchange，提问作者Marcus F