jQuery 导航条置顶滚动渐变背景透明度

cyanzz

于 2018-02-17 19:05:12 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：网页前端文章标签： jQuery 导航条背景透明

本文链接：https://blog.youkuaiyun.com/cyanzz/article/details/79332475

本文探讨了两种方法实现jQuery导航条在页面滚动时背景透明度的变化。思路一是根据滚动条滚动的像素调整透明度；思路二是当滚动条像素大于0时设置背景完全不透明并添加过渡效果。为了防止内容层透明度变化，需使用两层DIV，背景层独立控制透明度。示例中，当滚动条下滚180像素时，导航条背景从透明渐变至不透明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路1

顶部导航条的背景透明度随着滚动条滚动的像素增加或者减少

思路2

只要滚动条的像素大于0 就给背景透明度1 然后再给个transitionshijian也有过度效果

问题1

顶部导航条要使用2层DIV叠加 1层为内容层 1层为作为背景层如果只是用1层里面的内容会同时改变透明度

问题2

透明度和滚动条高度的关系

下面例子导航条初始透明度是0 当滚动条距离顶部到180像素时（向下滚动180像素时）变为不透明

<!doctype html>  
<html lang="en">  
 <head>  
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">   
  <title>jQuery控制导航条滚动变透明</title>
  <script src="https://cdn.bootc

最低0.47元/天解锁文章

200万优质内容无限畅学