Javascript 滚动时更改背景色固定菜单_Javascript_Menu

Javascript 滚动时更改背景色固定菜单

javascript menu

Javascript 滚动时更改背景色固定菜单,javascript,menu,Javascript,Menu,我想更改固定菜单“Wie zijn wij”、“Onze Misse、visie en kernwaarden”等的背景色。因此，当您向下滚动到某一点时，背景色会发生变化以下是我迄今为止所做的代码：函数scrollIt（元素）{ window.scrollTo({ “行为”：“平滑”， “左”：0， “顶部”：element.offsetTop }); } const btn=document.queryselectoral（'.btn'）； const sections=document

我想更改固定菜单“Wie zijn wij”、“Onze Misse、visie en kernwaarden”等的背景色。因此，当您向下滚动到某一点时，背景色会发生变化

以下是我迄今为止所做的代码：

函数scrollIt（元素）{
window.scrollTo({
“行为”：“平滑”，
“左”：0，
“顶部”：element.offsetTop
});
}
const btn=document.queryselectoral（'.btn'）；
const sections=document.querySelectorAll（'.section'）；
btn[0]。addEventListener（'单击'，（）=>{
scrollIt（第[0]节）；
});
btn[1]。addEventListener（'click'，（）=>{
scrollIt（第[1]节）；
});
btn[2]。addEventListener（'click'，（）=>{
scrollIt（第[2]节）；
});
btn[3]。addEventListener（'click'，（）=>{
scrollIt（第[3]节）；
});
btn[4]。addEventListener（'click'，（）=>{
scrollIt（第[4]节）；
});
btn[5]。addEventListener（'click'，（）=>{
scrollIt（第[5]节）；
});
btn[6]。addEventListener（'click'，（）=>{
scrollIt（第[6]节）；
});
var header=document.getElementById（“sidenav”）；
var btns=header.getElementsByClassName（“btn”）；
对于（变量i=0；i0）{
当前[0]。className=current[0]。className.replace（“活动的”）；
}
this.className+=“活动”；
});
}

@导入url（'https://fonts.googleapis.com/css?family=Poppins');
身体{
字体系列：“Poppins”，无衬线；
}
#侧导航{
宽度：200px；
位置：固定；
溢出x：隐藏；
边缘顶部：10px；
左边距：10px；
}
.btn{
颜色：黑色；
填充物：5px10px；
文字装饰：无；
显示：内联块；
字体大小：15px；
利润：4倍2倍；
光标：指针；
边框：1px纯黑；
边界半径：7px；
宽度：176像素；
文本对齐：左对齐；
背景色：#F5；
字体大小：300；
}
a:悬停{
颜色：9ce728；
}
a:焦点{
背景色：#EAB126
}
/*设置活动类的样式，并将鼠标悬停在*/
.active，.btn:悬停{
背景色：#a6a8ad；
颜色：#fff；
}
.科{
宽度：100%；
高度：100vh；
线路高度：100vh；
文本对齐：居中；
&：第n个孩子（偶数）{
背景：#eee；
}
&：第n个孩子（奇数）{
背景：#ccc；
}
}


你是谁？


关于任务，请访问kernwaarden


你在哪里？


三K党案件


泽根职业酒店？


纽斯伯里斯登


昂泽克兰滕


帕吉纳1号
帕吉纳2号
帕吉纳3号
帕吉纳4号
帕吉纳5号
帕吉纳6号
Pagina 7

使用下面的js更改包含不同背景颜色的类。我在这里使用的是

jquery

HTML

<body>
   <div class='tmp'> This is a sample div  </div>
</body>

你忘了带密码笔了！是的，对不起。我不知道如何添加它尝试更改为JSFIDLE，但也不起作用。谢谢Nick@Matt他没有；他刚刚创建了锚属性：

code

。我建议进行编辑。@Pete*叹气*谢谢，我想我们可以试试。我试过这个“[Code][1]”，链接显示在底部，但仍然不起作用！谢谢你的评论！这不是我要找的。检查我添加到问题中的示例

 $(window).scroll(function() {    
      if (document.body.scrollTop <= 0 ){
          console.log('scrolll');
          $(".tmp").addClass("diffColor");
        }
    });

body {
  height: 400px;
}

.tmp {
  background: red;
  height: 500px;
}

.diffColor {
  background-color: blue;
 }