滚动视频上的导航栏不透明度

是指当网页中存在视频背景时，导航栏在滚动页面时保持不透明的效果。这样做的目的是为了确保导航栏在视频播放过程中始终可见，提供更好的用户体验。

滚动视频上的导航栏不透明度的实现可以通过以下步骤：

监听页面滚动事件：使用JavaScript代码监听页面滚动事件，以便在滚动时触发相应的操作。
获取滚动位置：通过JavaScript代码获取当前页面的滚动位置，可以使用window.scrollY或window.pageYOffset属性来获取。
计算导航栏透明度：根据滚动位置计算导航栏的透明度。可以根据滚动位置与视频的高度进行比较，设定一个阈值，当滚动位置超过阈值时，导航栏的透明度设为0，即完全不透明；当滚动位置小于阈值时，根据滚动位置与阈值的比例来设定导航栏的透明度，实现逐渐变为不透明的效果。
设置导航栏样式：根据计算得到的透明度值，使用CSS样式来设置导航栏的透明度。可以使用rgba()函数来设置导航栏的背景颜色，其中最后一个参数表示透明度，取值范围为0到1，0表示完全透明，1表示完全不透明。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: rgba(255, 255, 255, 0); /* 初始透明度为0 */
      transition: background-color 0.5s ease; /* 添加过渡效果 */
    }
  </style>
</head>
<body>
  <div class="navbar">
    <!-- 导航栏内容 -->
  </div>
  <div class="video">
    <!-- 视频内容 -->
  </div>

  <script>
    window.addEventListener('scroll', function() {
      var navbar = document.querySelector('.navbar');
      var videoHeight = document.querySelector('.video').offsetHeight;
      var scrollPosition = window.scrollY || window.pageYOffset;

      if (scrollPosition > videoHeight) {
        navbar.style.backgroundColor = 'rgba(255, 255, 255, 1)'; /* 滚动位置超过阈值，完全不透明 */
      } else {
        var opacity = scrollPosition / videoHeight; /* 根据滚动位置与视频高度的比例计算透明度 */
        navbar.style.backgroundColor = 'rgba(255, 255, 255, ' + opacity + ')';
      }
    });
  </script>
</body>
</html>

以上代码中，通过监听滚动事件，根据滚动位置与视频高度的比例计算导航栏的透明度，并使用CSS样式设置导航栏的背景颜色。当滚动位置超过视频高度时，导航栏完全不透明；当滚动位置小于视频高度时，透明度逐渐增加，实现滚动视频上的导航栏不透明度效果。

对于腾讯云的相关产品和产品介绍链接地址，可以参考以下推荐：