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

思路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());//设置滚动多少像素后透明度变为1var 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 并且增加转换时间为1sif(topScroll>0){$('.navwrapbg').css('opacity',1);$('.navwrapbg').css('transition','1s');}else{$('.navwrapbg').css('opacity',0);  }  }  $(window).on('scroll',function() {  topNavScroll();});  </script>

jQuery 导航条置顶滚动渐变背景透明度相关推荐

html导航条置顶,jquery导航菜单栏固定悬浮顶部实现效果
今天做了个固定定位的效果.比如对导航需要进行固定定位效果:当没有滚动到导航下面,导航正常显示.当滚动到导航下面,导航就固定到顶部. 一.css部分: fixed 生成绝对定位的元素,相对于浏览器窗口进 ...
html中导航条置顶的代码,一个DIV+CSS代码布局的简单导航条
一个蓝色主题的导航条结构案例,本CSS小实例,采取DIV CSS实现.同时不必图片做靠山,直接运用布景致完成,鼠标经由过程悬停对应栏目称说是对应背景蓝色变深. 导航条一小块成就截图通常导航条接纳ul ...
html中导航条置顶的代码6,JS+CSS实现六级网站导航主菜单效果
本文实例讲述了JS+CSS实现六级网站导航主菜单效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现支持6级的网站导航主菜单,级级相信够大家用了,外观蓝色风格,也是使用最多的一种菜单颜色, ...
随着滚动条下拉，导航栏置顶
随着滚动条下拉,导航栏置顶想做一个这样的效果,当我们下拉滚动条时,写的导航栏置顶. 这是效果图先学习用到的基本知识 jQuery CSS 操作 - scrollTop() 方法 scrollTop ...
php置顶功能代码,jquery实现页面置顶功能代码
//获取页面的最小高度,无传入值则默认为600像素 min_height ? min_height = min_height : min_height = 600; //为窗口的scroll事件绑定处 ...
html5导航菜单置顶,jQuery和css3顶部固定导航菜单特效插件
这是一款非常实用的jQuery和css3顶部固定导航菜单特效插件.我们曾经在很多网站上都看到过这种顶部固定导航菜单特效.Disqus For Websites的导航菜单就是一个很好的例子. HTML结 ...
解决jquery的scrollTop()置顶的浏览器兼容
2019独角兽企业重金招聘Python工程师标准>>> 对于前端开发者来说,浏览器兼容是经常会遇到的问题,在不同的项目中经常会遇到不同的弹出层操作,比如登录的弹出层,需要在屏幕的中间 ...
html背景置顶,css设置背景图片位置固定
先看下实例html> css背景图片固定 body{ background-image: url("https://picsum.photos/id/100/1080/1400&quo ...
vue 滑动置顶功能_VUE 实现滚动监听导航栏置顶的方法_蜡烛_前端开发者
非重点的代码,比如样式啥的,我就不放上来了,一笔带过简略的写一下 1. data () data () { paddingBottom: '1.5rem', // 给最外层div一个padding- ...

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

jQuery 导航条置顶滚动渐变背景透明度相关推荐

最新文章

热门文章