Html 滚动时如何更改文本的颜色？

在学校，我正在为我的HTML课程设计一个菜单，我想知道如何使我的h1和h2文本在到达页面顶部时变为白色，页面顶部有背景图像，顶部为黑色。下面是我的代码。h1和h2标签是我唯一想更改的

/*
$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
var light_pos=$（'#white_div'）.offset（）.top；
var light_height=$（'#white_div'）.height（）；
变量菜单位置=$（'.NavigationButton'）.offset（）.top；
变量菜单高度=$（'.NavigationButton'）.height（）；
var scroll=$（窗口）.scrollTop（）；
控制台日志（“灯”，灯位置）；
控制台日志（“菜单”，菜单位置）；
console.log（'scroll'，scroll）；
如果（菜单位置>灯光位置和菜单位置<（灯光位置+灯光高度））{
$（'.NavigationButton'）.addClass（'menu_black'）；
$（'.NavigationButton'）.removeClass（'menu_white'）；
}否则{
$（'.NavigationButton'）.removeClass（'menu_black'）；
$（'.NavigationButton'）.addClass（'menu_white'）；
}
})
})
*/

h1{
字体系列：“警告”，草书；
边缘底部：100px；
边界：4px；
利润率：100像素；
填充：50px；
宽度：300px；
}
b{
字体系列：“你无能为力”，草书；
}
氢{
字体系列：“你无能为力”，草书；
字体大小：40px；
}
h3{
字体家族：“自制苹果”，草书；
}
div{
边框：4倍纯黑；
利润率：100像素；
填充：50px；
宽度：300px；
背景：rgba（255、255、255、0.3）
}
苏普{
字体系列：Verderna、Helvetica、无衬线；
}
.导航按钮{
位置：固定；
最高：5%；
右：5%；
z指数：99999；
字号：700；
颜色：继承；
}
.菜单(白色){
颜色：#fff；
}
.菜单(黑色){
颜色：#000；
}
身体{
背景图像：url（'https://bestanimations.com/media/beverages/405618319drink-animated-gif-16.gif');
/*图像扫描*/
背景重复：无重复；
/*如果更改为“重复”，图像将重复*/
背景附件：固定；
/*您的图像是停留在一个点上，还是在滚动时移动*/
背景尺寸：封面；
/*图像的分辨率*/
}

大冲浪岛：饮料菜单
随便喝一杯，随便喝！
非酒精饮料
喷泉饮料-------------------1.99
选择我们的任何一种喷泉饮料，任何你想要的口味！
冰茶,茶,；咖啡2.95
选择你喜欢的冷茶或热茶、任何口味的茶或咖啡。
仅限爸爸妈妈喝的饮料（必须向
服务员出示有效身份证，证明您
年龄超过21岁）
啤酒和葡萄酒-------5.99
选择你的毒药，但不要过量。

那么您的注释代码就是您的尝试？@mplungjan是的。这是我在谷歌上搜索到的。