开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

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

监听页面滚动事件：使用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样式设置导航栏的背景颜色。当滚动位置超过视频高度时，导航栏完全不透明；当滚动位置小于视频高度时，透明度逐渐增加，实现滚动视频上的导航栏不透明度效果。

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

视频处理：腾讯云点播（https://cloud.tencent.com/product/vod）
人工智能：腾讯云智能视频分析（https://cloud.tencent.com/product/vca）
存储：腾讯云对象存储（https://cloud.tencent.com/product/cos）
云原生：腾讯云容器服务（https://cloud.tencent.com/product/tke）
数据库：腾讯云数据库（https://cloud.tencent.com/product/cdb）
网络安全：腾讯云Web应用防火墙（https://cloud.tencent.com/product/waf）
物联网：腾讯云物联网开发平台（https://cloud.tencent.com/product/iotexplorer）
移动开发：腾讯云移动应用开发平台（https://cloud.tencent.com/product/mad）
区块链：腾讯云区块链服务（https://cloud.tencent.com/product/tbaas）
元宇宙：腾讯云元宇宙解决方案（https://cloud.tencent.com/solution/metaverse）

请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估。

相关搜索:js导航栏滚动透明度需要帮助移除滚动菜单上的不透明度更改滚动页眉的不透明度滚动300上的React导航栏修复 Wpf性能问题:画笔上的不透明度与元素上的不透明度未在材质上设置不透明度的ThreeJS中的不透明度视差图像上的不透明度滚动条上的渐变引导导航栏 Swift: Tableview在导航栏下滚动，但在状态栏上滚动？如何避免IQKeyboard在导航栏上滚动？如何在向下滚动时增加logo和导航栏的透明度？在对象达到100%不透明度后停止基于JQuery不透明度的滚动效果在不透明度为0.5的UIView中调整按钮上的不透明度滚动上的粘性透明导航栏，使用视频作为背景带导航栏的侧边滚动更改滚动上的导航栏带渐变的滚动导航栏循环上的SVG动画不透明度 Touchabe不透明度在React导航中的工作视差滚动的背景图片不透明度

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Flutter质感设计之底部导航

BottomNavigationBar即底部导航栏控件。显示在应用底部的质感设计控件，用于在少量视图中切换。底部导航栏包含多个以标签、图标或两者搭配的形式显示在项目底部的项目，提供了应用程序的顶级视图之间的快速导航。对于较大的屏幕，侧面导航可能更好。

02

纯干货！谷歌MD深色主题设计规范详解（附Sketch官方文件下载）

作为目前最主流的设计风格和主题规范之一，Material Design 的深色主题设计规范非常值得参考学习。这是一套高度自恰的设计规范，有着相当严密的内部逻辑，在 Material Design 的内在隐喻逻辑的推动下，严格遵循国际通行的可用性原则来确保深色主题的可用性和合理性。

01

开启全面屏体验 | 手势导航 (一)

本文是手势导航连载的第一篇文章，在接下来的时间里，我们将会为大家带来一系列手势导航的话题，敬请关注！

03

开启全面屏体验 | 手势导航 (一)

本文是手势导航连载的第一篇文章，在接下来的时间里，我们将会为大家带来一系列手势导航的话题，敬请关注！

01

[flutter专题]6详解AppBar小部件

应用栏是各种应用程序中最常用的组件之一。它可用于容纳搜索字段、以及在页面之间导航的按钮，或者只是页面标题。由于它是一个如此常用的组件，因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。

01

iOS透明导航栏的平滑过渡（进阶版）引实现过程结

如我在传送门：iOS导航栏切换界面时隐藏和显示中所说，现在很多App的个人中心模块都是不保留导航栏的，会直接使导航栏透明，比如做的很好的QQ个人信息界面：

04

重磅！iOS应用黑暗模式设计终极指南（附套件下载）

在本指南中，我将逐步解释为iOS应用设计暗模式的过程。本文将重新设计WhatsApp，基于Apple的人机界面指南。

01

react native简单入门

只执行一次： constructor、componentWillMount、componentDidMount 执行多次：render 、子组件的componentWillReceiveProps、componentWillUpdate、componentDidUpdate 有条件的执行：componentWillUnmount（页面离开，组件销毁时）不执行的：根组件（ReactDOM.render在DOM上的组件）的componentWillReceiveProps（因为压根没有父组件给传递props）

01

《Motion Design for iOS》（三十一）

在本指南的前面，我提到了一些Jeff Broderick设计并发布到Dribbble的很棒的动画。

03

基础篇章：关于 React Native 之 Touchable 系列组件的讲解

【回复“1024”，送你一个特别推送】（友情提示：RN学习，从最基础的开始，大家不要嫌弃太基础，会的同学请自行略过，希望不要耽误已经会的同学的宝贵时间）在上篇 ScrollView 的讲解的实例中

09

windows下打造漂亮的msf

首先需要在windows下安装kali子系统。打开windows设置，选择更新和安全 ====> 开发者选项，选择开发人员模式。

02

基础篇章：关于 React Native 之 Touchable 系列组件的讲解

提示：前天文章，重发，不想看的请略过，上次失误忘了加效果图（友情提示：RN学习，从最基础的开始，大家不要嫌弃太基础，会的同学请自行略过，希望不要耽误已经会的同学的宝贵时间）在上篇 ScrollVi

09

微光小插画—一篇不怎么专业的所谓教程

说说为什么选择大象和骆驼吧，选择大象是因为是前几天看了一篇呼吁大家不要骑大象的视频，觉得琦大象很残忍，并且这段时间又在读《未来简史》人类史，从另一些角度颠覆了一些世界观，觉得动物应该也是有感情感受的，当然了，并不是一直都这样想，如果往这方面思考就会越陷越深，不去乱想就好了

03

css opacity属性_CSS中的opacity属性[通俗易懂]

With the growing need of making websites, the need for styling them has also increased. Therefore, CSS has become an indispensable part of creating websites. Thus one must be aware of which properties to use while creating a website.

02

QQ隐藏图原理与C#实现(含源文件)

QQ群聊的背景色为白色，而打开图片后的背景色为黑色，如果能巧妙修改图片各个像素的透明度，就可以达到在不同背景下显示出不同图片的功能。

01

【PS算法理论探讨一】 Photoshop中两个32位图像混合的计算公式（含不透明度和图层混合模式）。

大家可以在网上搜索相关的主题啊，你可以搜索到一堆，不过似乎没有那一个讲的很全面，我这里抽空整理和测试一下数据，分享给大家。

02

一篇文章带你了解CSS Opacity(透明度)

opacity CSS属性指定元素的透明度。opacity属性指定了一个元素的透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。

01

【软件开发规范七】《Android UI设计规范》

Android 定义颜色color时有6位或8位值的区别，6位（如：#0470C4）就是RGB，值8位（如：#1E000000）头两位是透明度，后6位是RGB值，00是完全透明，FF是完全不透明，比较适中的透明度值是 1E。

02

运维：推荐一款非常实用的窗口管理增强工具WindowTop

WindowTop Pro专业版是一款Windows上使用的窗口管理增强工具，支持Win7及以上系统，将当前窗口设置在顶部，使其变暗，应用透明性，缩小它，等等！该软件使您可以将任何窗口固定在顶部，启用窗口透明度，甚至单击透明窗口，设置窗口黑暗/阅读模式，将窗口缩小到小尺寸等等。您可以轻松地将窗口设置在顶部，并用红框突出显示最顶部的窗口。您可以在设置中配置此行为（框架颜色等）。

02

[首发] 苹果iOS 13 新设计规范全面解析

静电说：iOS 13已经发布了半个月时间。很多小伙伴都特别想对iOS13的全新设计规范有一个全面的了解。在这里静电结合WWDC 2019的官方视频与苹果官方资料，花了一整天的时间翻译整理，为大家带来最全面细致的iOS 13交互设计指南及规范解析。赶紧转发收藏吧！

04

VSDX Annotator for mac，Visio 绘图注释工具

VSDX Annotator 是一款用于在 Mac 上操作 MS Visio 绘图的工具。它提供了广泛的注释可能性，以及在多平台环境中共享可视文档

02

专业的图像处理工具：Pixelmator Pro Mac下载

Pixelmator Pro Mac版是一款专业的图像处理工具，具有对RAW图像的卓越支持，并内置了众多效果和高质量的矢量图形，支持psD，TIFF，PNG，TGA等最流行的图像格式， BMP，JPEG，GIF和JPG-2000，支持使用图层编辑Photoshop图像，以及支持导入HEIF图像，功能强大！

03

【PS算法理论探讨三】 Photoshop中图层样式之颜色叠加/渐变叠加/图案叠加算法原理初探讨。

颜色叠加：这个和编辑菜单下的填充颜色基本是一个意思，相当于在原有的图层上部添加了一个纯实色的虚拟图层，选项里的不透明度和混合模式和普通的概念是一个意思。注意这里是不改变原有图层的不透明度的。

03

PS基础，让你弄懂画笔工具

Alt+Shift+右键单击（Mac上Control + Option + Cmd +单击）可使用色彩选择器。编辑->常规下的光标选项

02

iOS系统中导航栏的转场解决方案与最佳实践

目前，开源社区和业界内已经存在一些 iOS 导航栏转场的解决方案，但对于历史包袱沉重的美团 App 而言，这些解决方案并不完美。有的方案不能满足复杂的页面跳转场景，有的方案迁移成本较大，为此我们提出了一套解决方案并开发了相应的转场库，目前该转场库已经成为美团点评多个 App 的基础组件之一。

03

手势魅力-设置一个触摸菜单

本篇为一移动端博文,个人觉得这篇外文还可以,就翻译了一下,最终实现的一个效果是:用手势创建一个本地菜单(点击一菜单按钮,实现设置一个触摸侧滑,滑动滑出效果,如下文中的gif图所示),主要涉及的知识点有移动端三大触摸事件(touchstart,touchmove,touchend),触摸属性,以及实现侧边栏动画,在处理移动端点击,拖动,滑动时,是不得要考虑用户的触摸手势,判断手指在页面上到底是点击还是滑动的,利用原生js的方法封装点击,移动,抬起功能函数,尽管移动(手机)端与pc端有很多相似之处,但还是有很多要注意的地方的,如果你想获得该Demo的源码,复制该标题后台回复[手势魅力-设置一个触摸菜单]就可以了的,初次翻译,如果有误导的地方,欢迎路过的老师,多提意见和指正,如果你想阅读英文原文,扫文末下方二维码或者跳转到指定链接就可以了的

04

如何使虚拟现实体验更加真实？（下）

大家好，我是堪萨斯州立大学的助理教授 Sungchul Jung。我将通过游戏体验介绍我们的研究，即振动对对称和非对称沉浸式多用户的影响（All Shook Up: The Impact of Floor Vibration in Symmetric and Asymmetric Immersive Multi-user VR Gaming Experiences）。

02

针对CSS说一说｜技术点评

如果这篇文章有帮助到你，给个❤️关注，❤️点赞，❤️鼓励一下作者，接收好挑战了吗？文章公众号首发，关注程序员哆啦A梦第一时间获取最新的文章

02

高真实感、全局一致、外观精细，面向模糊目标的NeRF方案出炉

模糊复杂目标的高真实感建模和渲染对于许多沉浸式 VR/AR 应用至关重要，其中物体的亮度与颜色和视图强相关。在本文中，来自上海科技大学的研究者提出了一种使用卷积神经渲染器为模糊目标生成不透明辐射场的新方案，这是首个将显式不透明监督和卷积机制结合到神经辐射场框架中以实现高质量外观的方案，并以任意新视角生成全局一致的 alpha 蒙版。

04

关于前端的photoshop初探的学习笔记

写在前边这还是高三的时候暑假的时候学习这个软件时记的笔记呢，今天又在电脑上找到了它，总觉得不应该让他尘封在我的硬盘上，于是挂了出来。温馨提示：比较乱，写给自己看的，看不下去，按ctrl+W 笔记内容 ps简介可以用于合成。可以三维 adobe bridge图像浏览器可以直接将图片拖动到ps的编辑系统中。。但是是出于临时文件状态，还需要对他进行保存。。网站上某些图片不能够拉动，但是可以利用截图功能来实现。。两张图片同时拉倒一个文件中构成两个不同的图层。。打开文件的几种方法。。 ps数

06

.NET MAUI 社区工具包 1.3版本发布

2022 年 10 月 4 日，微软发布了 .NET MAUI 社区工具包的 1.3 版，具体参见微软官方博客：https://devblogs.microsoft.com/dotnet/announcing-the-dotnet-maui-community-toolkit-v13/ ，该工具包是 MAUI 官方应用程序框架的补充库。此版本包括错误修复和多项增强功能，例如 gravatar 支持、彩色状态栏和控件的淡入淡出动画。

02

行为变更 | Android 12 中不受信任的触摸事件

我们在 Android 12 中进行了一些变更，来提升应用和平台的安全性，进而使我们的用户能够拥有更安全的使用体验。回顾关于隐私和安全的文章，请参阅: 政策更新 | 开发者如何处理软件包可见性。

03

jquery nicescroll 配置参数

jQuery滚动条插件兼容ie6+、手机、ipad http://www.areaaperta.com/nicescroll/ jQuery(function($){ $("#scrollInner").niceScroll({ touchbehavior:false, cursorcolor:"#398F70", cursoropacitymax:1, cursorwidth:5, cursorborder:

08

PS|三大图层样式运用

PS作为一个很全面的图像处理软件，为大家提供了许多的功能，而其图层样式更是使得使用者有更多的方式对图像细节进行处理。接下来，就让我们去学习一下PS三大常用图层样式。

03

VSDX Annotator for mac(Visio绘图工具)

Visio 绘图的工具哪款好用？推荐使用VSDX Annotator ，一款用于在 Mac 上操作 MS Visio 绘图的工具。它提供了广泛的注释可能性，以及在多平台环境中共享可视文档。

02

谷歌华人研究员发布MobileNeRF，渲染3D模型速度提升10倍

---- 新智元报道编辑：LRS 【新智元导读】最近谷歌发布了全新的MobileNeRF模型，直接将神经辐射场拉入移动时代，内存需求仅为1/6，渲染3D模型速度提升10倍，手机、浏览器都能用！ 2020年，神经辐射场（NeRF）横空出世，只需几张2D的静态图像，即可合成出该模型的3D场景表示，从此改变了3D模型合成的技术格局。 NeRF以一个多层感知器（MLP）来学习表示场景，评估一个5D隐式函数来估计从任何方向、任何位置发出的密度和辐射，可在体渲染（volumic rendering）框架下

03

制作长投影icon的一点注意事项

先放一下最终的效果图，这个图是今天在UI中国的一个临摹！相信我，我也不是什么大神，只是每天想做点东西，思考些东西，多练多积累，只看是没用的，只有做才行（其实这个图背景的渐变方向反了，亮部应该在左上角才对,,ԾㅂԾ,,）

03

教你调出经典白青色

日系色调透露着淡雅、柔美、低饱和，给人带来静谧与纯净的观感。今天小轻教大家如何把一张照片简单几步变成日系小清新，步骤详细，要耐心学习哦！

02

前端特效开发 | JS实现聚光灯看图效果

HTML5学堂（码匠）：昏暗的场景下，查看任何的图片、效果都会给人不适的感觉，所以人们往往喜欢在明亮的场景中来体验世界的美好。对于前端开发来说，想要让用户能在更明亮的状态下查看各种图片，那就必须为页

05

Adobe Photoshop，选择图像中的颜色范围

“色彩范围”命令选择现有选区或整个图像内指定的颜色或色彩范围。如果想替换选区，在应用此命令前确保已取消选择所有内容。“色彩范围”命令不可用于 32 位/通道的图像。

05

对皮肤美白算法的一些研究。

《Motion Design for iOS》（二十七）

是时候添加一些动画了。为了警告框的显示，如我之前所说，我们想要覆盖层从完全透明（不可见）变成半透明。我们还想要添加两个动画到警告框中：将不透明度从0.0动画到1.0，以及将比例从大于1.0动画到1.0。这就是iOS 7的警告框做的事情，所以我们要模仿它。

03

05-老马jQuery教程-动画

根据文章内容总结摘要。

00

20种常用的 Ps技术

一种简单的数码照片后期润饰 1 打开图片,执行色像/饱和度（-40）降低饱和度。 2 新建一图层，将图层模式改为柔光，用画笔工具将需要润饰的部分画几下，这里可以利用色板方便的提取颜色 3 图片色彩过渡不够柔和，再执行一下滤镜下面的高斯模糊（+85）

01

jQuery里面的动画

finish 等价 stop(true,true)，当前动画停止，不清除队列，直接队列完成

02

中心放大图片与改变遮罩透明度

上面的分析中，提到了图片和遮罩层，所以我们先在画布中，放入图片元件和矩形元件，因为整个过程是遮罩层为主，所以矩形元件放在图片原件之上

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭