用Elementor制作透明和固定页眉

使用 Elementor 编辑header
ElementsKit Nav Menu的菜单栏
Site Logo的LOGO
设置了都透明，且置顶TOP，
怎么下拉的时候，背景设置为白色，字体与LOGO设置为黑色

百度了代码，实现了背景是白色，但是字体跟LOGO颜色不变，
求指导，谢谢！

/*修改sticky--effects固定效果下下面下的固定效果下的背景的背景颜色 */
selector.elementor-sticky--effects{ background-color:#FFFFFF !important } 

/*修改sticky--effects固定效果下的section背景颜色切换速度 */
selector{ transition: background-color 1s ease !important; } 

/*修改sticky--effects固定效果下的section高度 */
selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; } 

/*修改sticky--effects固定效果下的section高度变化速度 */
selector > .elementor-container{ transition: min-height 1s ease !important; } 
 
 /*修改sticky--effects固定效果下的section内菜单字体的颜色wei为黑色，这里需要根据自己元素的选择器进行设置不可以直接复制*/
selector.elementor-sticky--effects .elementor-nav-menu--main .elementor-item {
     color: #54595f;
 }
 /*修改sticky--effects固定效果下的section内搜索按钮图标颜色为黑色，这里需要根据自己元素的选择器进行设置不可以直接复制*/
selector.elementor-sticky--effects  .elementor-search-form__toggle{
     color: #54595f;
 }

要设置在下拉时，背景为白色，字体和logo为黑色，你可以在自定义CSS中添加以下代码：

selector:not(.header-top) .site-header { 
   position: fixed;  
   top: 0;  
   width: 100%;  
   background-color: transparent;  
   z-index: 9999; 
}

selector:not(.header-top) .site-header.is-sticky {  
   background-color: #fff;  
   color: #000; 
}

selector:not(.header-top) .site-header.is-sticky .main-menu > li > a {  
   color: #000; 
}

selector:not(.header-top) .site-header.is-sticky .logo img {  
   filter: invert(100%); 
}

这个代码块将header区块设为固定定位，在顶部进行展示，同时背景颜色为透明。

在下拉时，is-sticky 类将被添加到 header 元素中，这时候你就可以对变化后的样式进行调整。

其中，“background-color: #fff” 将标题栏背景设置为白色，“color: #000” 将标题栏文字颜色设置为黑色，“filter: invert(100%)” 实现在下拉时逆转site logo的颜色，变为黑色。

通过以上步骤，你就可以实现当下拉时，背景为白色，字体和logo为黑色的效果了。