思路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.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style type="text/css"> .mainwrap{ width:100%; height:1800px; background:#EEE; } .main{ margin: 0 auto; text-align: center; } .navwrap{ width:100%; height:60px; position:fixed; top:0; z-index: 1; line-height: 60px; } .nav{ margin: 0 auto; font-size: 18px; } .navwrapbg{ width:100%; height:60px; background:#FFF; position:fixed; top:0; box-shadow: 0px 1px 15px #999; opacity: 0; } </style> </head> <body> <div class="navwrap"> <div class="nav container"> <div class="row"> <div class="col-xs-2 visible-xs-inline text-center"><span class="glyphicon glyphicon-menu-hamburger"></span></div> <div class="col-md-3 col-sm-3 col-xs-3">LOGO</div> <div class="col-md-9 col-sm-9 hidden-xs">Home / News / Products / about us</div> </div> </div> </div> <div class="navwrapbg"></div> <div class="mainwrap"> <div class="main"> <img src="http://static01.coloros.com/bbs/data/attachment/forum/201503/09/182142idaabaxxa60bneqm.jpg" alt="" width="100%"> </div> </div> <script> function topNavScroll(){ //获取当前窗口滚动条顶部所在的像素值 并取整 var topScroll = Math.floor($(window).scrollTop()); //设置滚动多少像素后透明度变为1 var scrollDist = 180; //定义滚动条在向下滚动180像素后 变成完全不透明 if(topScroll <= scrollDist){ //通过浏览器标题栏显示并检查数据 //document.title = topScroll + '-' + opacity; //计算当前透明度 当前所在的像素 除 180(topScroll的最大值 因为透明度的值是0-1之间的小数) $('.navwrapbg').css('opacity',topScroll/scrollDist); } else{ $('.navwrapbg').css('opacity',1); } } $(window).on('scroll',function() { topNavScroll(); }); </script> </body> </html>思路2
<script> function topNavScroll(){ //获取当前窗口滚动条顶部所在的像素值 并取整 var topScroll = Math.floor($(window).scrollTop()); //定义滚动条只要大于0 背景透明度就变成1 并且增加转换时间为1s if(topScroll>0){ $('.navwrapbg').css('opacity',1); $('.navwrapbg').css('transition','1s'); } else{ $('.navwrapbg').css('opacity',0); } } $(window).on('scroll',function() { topNavScroll(); }); </script>