Javascript 如何通过滚动显示标题的不透明背景

我希望在滚动期间使导航栏的背景颜色不透明。 我的导航栏在Header Div中

事实上，当我滚动时，我的导航栏和内容混在一起，我什么都看不懂

我尝试了很多教程，但我的javascript知识很差，什么都不管用

我只想背景标题是不透明度0时，我们在页面的顶部，并成为0.7时，我们滚动

谢谢你的帮助

/*粘性导航栏*/
window.onscroll=函数（）{
myFunction（）
};
var navbar=document.getElementById（“标题”）；
var sticky=navbar.offsetTop；
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}
$（窗口）。滚动（函数（）{
var threshold=200；//要开始淡入的页面底部之前的像素数
var op=（$（document.height（）-$（window.height（））-$（window.scrollTop（））/threshold；
if（op只需通过检查元素偏移顶部，在滚动时用js切换类（
.isSticky
）

#header {
  display: flex;
  justify-content: flex-end;
  background: rgba(139, 139, 157, 0);
  z-index: 2;
}

#header.isSticky {
  background: rgba(139, 139, 157, 0.7);
}

除了马蒂亚所说的，我还发明了一支钢笔。我希望这能有所帮助

我还添加了一个css转换，所以它会消失，但这只是个人喜好的问题。如果你愿意，你完全可以删除它


更改如下:
css

js

您的代码片段缺少jQuery，因此我为您添加了它。我想这只是问题中的一个疏忽，而不是问题的实际原因很多：-）如果不进行优化，基于滚动事件的函数可能会非常贪婪，我建议您使用一个lib，比如优秀的scrollmagic，如果您不想阻塞浏览器，您真的想查看debounce:）我在我的header类上有isSticky，header.isSticky的css样式。我在javascript文件上有什么事情要做吗？好的，我明白你的意思。我在我的“.js”中检查了标题的位置：如果它在顶部，那么样式是“background:rgba（139，139，157，0）；”如果不是“background:rgba（139，139，157，0.7）“是吗？是的。您可以检查偏移顶部或滚动位置（如果大于0，则用户正在滚动）
   #header {
      display: flex;
      justify-content: flex-end;
      background: rgba(139, 139, 157, 0);
        -webkit-transition: background 0.5s ease-in-out;
      -moz-transition: background 0.5s ease-in-out;
      -ms-transition: background 0.5s ease-in-out;
      -o-transition: background 0.5s ease-in-out;
      transition: background 0.5s ease-in-out;
      z-index: 2;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
    }

#header.isSticky {
  background: rgb(139, 139, 157, 0.7);
    -webkit-transition: background 0.5s ease-in-out;
  -moz-transition: background 0.5s ease-in-out;
  -ms-transition: background 0.5s ease-in-out;
  -o-transition: background 0.5s ease-in-out;
  transition: background 0.5s ease-in-out;
}

$(document).ready(function(){// checks vertical position of scroll bar 
var scrollY = $(this).scrollTop();
// when user refreshes psge
if (scrollY > 0) {
  // if it is anywhere but the top change opacity by adding class .isSticky
  $('#header').addClass('isSticky');
} else {
  $('#header').removeClass('isSticky');
}


$(window).on('scroll', function(){
  // while uesr scrolls check the scrollTop position
  var scrollY = $(this).scrollTop();
  if (scrollY > 0) {
   $('#header').addClass('isSticky');
  } else {
   $('#header').removeClass('isSticky');
  }
});
});