如何淡化靠近导航栏的内容 + 如何在滚动时更改导航栏的颜色？

Question

这是我第一次构建导航栏。我的目标是让导航栏根据页面 BG 改变 - 页面的原始颜色为橙色，导航栏文本为白色 (img1)，当您滚动到白色 BG div 时，导航栏文本在进入时变为橙色（ img2）。我还希望页面的内容在靠近导航栏时淡出。我不知道怎么做，所以我创建了一个渐变（如果你知道如何做得更好，也请帮忙）：

background: linear-gradient(180deg, #F6A770 0%, rgba(246, 167, 112, 0) 100%);

（请记住图像中的渐变在错误的位置，白色应该在底部，橙色在顶部图像上以创建淡入淡出效果。我交换了它们，这样您就可以看清楚并希望能更好地理解我的意思） 它有效，即使它看起来很丑。我现在的问题是，当橙色渐变进入白色 BG div 时，如何使其变为白色？我写了这个，但它所做的只是在橙色 div 上出现白色渐变，在白色 div 上出现橙色渐变，但它做的并不顺利：

jQuery(window).scroll(function(){
  var spx;
  var spx = jQuery(window).scrollTop();
    if (spx >= 865 && spx <= 1629) {
      $("#gradient").addClass('scrolled');
    } 
    else {
      $("#gradient").removeClass('scrolled');
    }
});