Javascript 如何根据卷轴更改徽标？

我试图做到的是，当它位于另一个元素上时，在固定导航中更改徽标，例如，当我有黑色背景时，将徽标更改为白色或其他方式

以下是jQuery：

$(document).ready(function () {
    var scroll_start = 0;
    var startchange = $('.scroll');
    var offset = startchange.offset();
    $(document).scroll(function () {
      scroll_start = $(this).scrollTop();
      if (scroll_start > offset.top) {
        $('.logo').removeClass('logo-not-active');
        $('.logo').addClass('logo-active');
      } else if (scroll_start < offset.top) {
        $('.logo').removeClass('logo-active');
        $('.logo').addClass('logo-not-active');
      } else {
        $('.logo').removeClass('logo-active');
        $('.logo').addClass('logo-not-active');
      }
    });
  });

$（文档）.ready（函数（）{
var scroll_start=0；
var startchange=$（'.scroll'）；
var offset=startchange.offset（）；
$（文档）。滚动（函数（）{
scroll_start=$（this.scrollTop（）；
如果（滚动开始>偏移量顶部）{
$（'.logo'）.removeClass（'logo-not-active'）；
$（'.logo'）.addClass（'logo-active'）；
}else if（滚动开始

最后，我确实找到了解决问题的方法，但代码可能不干净，也不是最好的，但它满足了我的需要。只是为了将来有人挣扎着做这样的事

我刚刚做了另一个函数

$(document).scroll(function () {
    var mainHero = $('#hero').offset().top;
    stop = Math.round($(document).scrollTop());
    if (stop > mainHero) {
      $('.logo').removeClass('logo-not-active');
      $('.logo').addClass('logo-active');
    } else {
      $('.logo').removeClass('logo-active');
      $('.logo').addClass('logo-not-active');
    }
  });

$(document).scroll(function () {
    var mainServ = $('#services').offset().top;
    stop = Math.round($(document).scrollTop());
    if (stop > mainServ) {
      $('.logo').removeClass('logo-active');
      $('.logo').addClass('logo-not-active');
    } else {
      $('.logo').addClass('logo-active');
    }
  });

---

您可以在根元素上使用

Element.scrollTop

属性来获取元素内容垂直滚动的像素数

const元素=document.documentElement；
const logo=document.querySelector（“#logo”）；
$（文档）。滚动（功能（e）{
如果（element.scrollTop<300）{
logo.classList.remove（'other'）；
logo.classList.add（'black'）；
}否则如果（element.scrollTop>=300&&element.scrollTop<600）{
logo.classList.remove（'black'）；
logo.classList.add（'other'）；
}否则{
logo.classList.remove（'other'）；
logo.classList.add（'white'）；
}
});
div{
高度：300px；
}
.p1{
背景色：#F2F2；
}
.p2{
背景色：#0033cc；
颜色：#e066ff；
}
.p3{
背景色：#303030；
颜色：#FFFFFF；
}
.内分区{
边缘顶部：80px；
位置：绝对位置；
}
#标志{
位置：固定；
排名：0；
}
怀特先生{
颜色：#FFFFFF；
}
布莱克先生{
颜色：#000000；
}
.其他{
颜色：#e066ff；
}

页面标题
我的标志
这是一个div元素。。。。。
这是一个div元素。。。。。
这是一个div元素。。。。。。
这是一个div元素。。。。。。
不知道相关的html，但可能是
$（document.body）。滚动…
应该是选择器吗？我不确定在将其更改为“$（document.body）后，滚动”会停止工作。现在它只在一个元素上改变，但问题是在之后也要改变它，然后添加一个我们可以尝试的元素。您可以使用文本区工具栏上的
添加一个类似小提琴的示例。最后我解决了它，下面我为将来的某个人发布了代码。我的代码可能不是最好的，但它满足了我的需要。保罗，谢谢你的帮助。