首页 / JAVASCRIPT / JS实现导航栏的透明渐变

JS实现导航栏的透明渐变

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS实现导航栏的透明渐变，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4690字，纯文字阅读大概需要7分钟。

内容图文

这次给大家带来JS实现导航栏的透明渐变，JS实现导航栏透明渐变的注意事项有哪些，下面就是实战案例，一起来看一下。

mui内置有H5版本的透明渐变导航控件，教程参考mui官网；透明渐变导航是一种解决滚动条通顶的变通方案，相比双webview，具有更高的性能和更好的动画效果；

下面通过本文给大家分享基于原生JS实现 MUI导航栏透明渐变效果，具体内容详情如下所示：

首先声明：由于backgroundColor的值采用的是RGBA，IE8及以下不支持，所以此效果不支持IE8及以下的浏览器

css代码

body,p,h1{margin: 0;}
.module-layer{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
}
.module-layer-content{
  position: relative;
  min-width: 320px;
  max-width: 750px;
  width: 100%;
  margin: 0 auto;
  background-color: rgba(255, 0, 0, 0.9);
}
.module-layer-bg{
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .7;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.layer-head-name{
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding: 0 50px;
  font-size: 20px;
}
.layer-return,.layer-share{
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  top:0;
  z-index: 1;
}
.layer-return{left: 0;}
.layer-share{right: 0;}
.fixed-layer{
  height: 100%;
  display: none;
  z-index: 100001;
}
.relative-layer{height: 100%;}
.layer-content{
  padding:3%;
  position: relative;
  top: 20%;
}
.layer-close{
  width: 2rem;
  height: 2rem;
  position: absolute;
  top:3%;
  right: 3%;
}
.pr {
  position:relative;
}
#shop-input::-webkit-input-placeholder {
  color:#fff;
}
#shop-input:-moz-placeholder {
  color:#fff;
}
#shop-input::-moz-placeholder {
  color:#fff;
}
#shop-input:-ms-input-placeholder {
  color:#fff;
}
#shop-input {
  border:none;
  outline:none;
  background:transparent;
}
.search-box {
  height:30px;
  border-radius:20px;
  top:10px;
  overflow:hidden;
  z-index:10;
}
.search-box:after {
  content:'';
  display:block;
  width:100%;
  height:30px;
  background:#fff;
  opacity:.5;
  position:absolute;
  top:0;
  left:0px;
  z-index:-1;
}
#shop-input {
  height:28px;
  line-height:28px;
  font-size:16px;
  position:absolute;
  top:0;
  left:30px;
}
.shop-search {
  width:16px;
  height:16px;
  position:absolute;
  top:7px;
  left:6px;
}
.layer-return{
  background: url(images/return.png) no-repeat center center/12px 20px;
}
.layer-share{
  background: url(images/share.png) no-repeat center center/20px 30px;
}
a {
 -webkit-tap-highlight-color: transparent;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
}
.module-content{
  min-width: 320px;
  max-width: 750px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
}
.module-content p:first-child img{margin-top: 0;}
.module-content p img{
  display: block;
  width: 100%;
  margin-top: 10px;
}

HTML代码

<header class="module-layer">
  <p class="module-layer-content">
    <p class="layer-return"></p>
    <h1 class="layer-head-name">
      <p class="pr search-box">
        <img class="shop-search" src="images/search.png"/>
        <input id="shop-input" type="text" placeholder="搜索店内商品" value="" />
      </p>
    </h1>
    <p class="layer-share"></p>
  </p>
</header>
<p class="module-content">
  <p><img src="images/banner.png"/></p> 
  <p><img src="images/banner1.png"/></p> 
  <p><img src="images/banner3.png"/></p>
  <p><img src="images/banner4.jpg"/></p>
  <p><img src="images/banner5.png"/></p>
  <p><img src="images/banner6.png"/></p>
  <p><img src="images/banner7.jpg"/></p>
  <p><img src="images/banner8.jpg"/></p>
</p>

JS代码

(function(){
  //获取滚动条当前位置
  function getScrollTop(){ 
  ??var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; 
  ??if(document.body){ 
  ????bodyScrollTop = document.body.scrollTop; 
  ??} 
  ??if(document.documentElement){ 
  ????documentScrollTop = document.documentElement.scrollTop; 
  ??} 
  ??scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; 
  ??return scrollTop; 
  }
  //获取CSS样式
  function getStyle(element, attr){
    if(element.currentStyle){
      return element.currentStyle[attr];
    }else{
      return window.getComputedStyle(element,null)[attr];
    }
  }
  //获取原始backgroundColor值
  var color = getStyle(document.getElementsByClassName('module-layer-content')[0],'backgroundColor');
  //取到RGB
  var colorRgb = color.substring(0,color.lastIndexOf(',') + 1);
  //取到A
  var colorA = color.substring(color.lastIndexOf(',') + 1,color.length - 1);
  //对A判断，如果最终值小于0.9，直接设置为1
  if(colorA < 0.9){colorA = 1;}
  //设置背景色的A的函数
  var setCoverOpacity = function() {
    document.getElementsByClassName('module-layer-content')[0].style.background = colorRgb + (((getScrollTop() / 550) > colorA) ? colorA : (getScrollTop() / 550)) + ')';
  }
  //初始化函数
  setCoverOpacity();
  //绑定滚动监听事件
  window.addEventListener('scroll',setCoverOpacity,false);
}())

注意：

不兼容IE8及以下的IE浏览器；

550是滚动条到达位置的最终透明度，此处根据需要自定义；

CSS终背景颜色的RGBA的A是最终透明度

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的JS实现导航栏的透明渐变全部内容，希望文章能够帮你解决JS实现导航栏的透明渐变所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/292259.html

来源：【匿名】

【上一篇】移除unique限制的方法【下一篇】javascript 怎么调用php方法

更多 ►

【JS实现导航栏的透明渐变】教程文章相关的互联网学习教程文章

jQueryMobile导航栏代码_jquery

导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role="button"）。使用 data-role="navbar" 属性来定义导航栏：代码如下:HomePage TwoSearch默认情况下，按钮的宽度与它的内容一样。使用一个无序列表来平均地划分按钮的宽度：1 个按钮占 100% 宽度，2 个按钮则各占 50% 的宽度，3 个按钮则每个占 33,3% 的宽度，依此类推。然而，如果您在导航栏中指定了超过...

当vue路由变化时,改变导航栏的样式方法【图】

当我们需要做一个类似顶部或底部导航栏公共组件的时候，单击某个导航栏按钮，跳转到另一个组件，并且改变导航栏按钮的样式，如果用<router-link to=""><router-link/> 跳转的时候，我们可以这样做，改变router-link-active 的样式，它是路由path指向当前组件时系统自动生成的。先看下效果：贴上我的路由文件js export default new Router({routes: [{path: /,component: App,children:[// 二级路由{path:,component:common_na...

javascript-钉钉网页版管理端导航栏不刷新只刷新内容的技术具体是什么【图】

钉钉网页版管理端导航栏不刷新只刷新内容的技术具体是什么地址也会随着更新，麻烦说出具体的技术关键词谢谢简单点说我可以使用vuejs实现这个效果吗单页应用回复内容：钉钉网页版管理端导航栏不刷新只刷新内容的技术具体是什么地址也会随着更新，麻烦说出具体的技术关键词谢谢简单点说我可以使用vuejs实现这个效果吗单页应用 HTML5 pushState + Ajax。 Ajax实现局部刷新，pushState实现更改地址栏，包括浏览器返回按...

javascript-wordpress侧边导航栏高度不够时随页面滚动是怎么实现的？

在高度足够时，侧边导航是fixed，内容不随滚动条滚动，如果页面高度不足以显示全部导航条内容，导航条就随页面一起滚动，请问这个效果是怎么实现的？回复内容：在高度足够时，侧边导航是fixed，内容不随滚动条滚动，如果页面高度不足以显示全部导航条内容，导航条就随页面一起滚动，请问这个效果是怎么实现的？自己看源码看明白了...wp-adminjscommon.js的pinMenu函数我没看过wp的实现，但是我的思路是侧边栏的div被整个大的contai...

javascript-页面滚动到相应位置导航栏也触发相应效果【图】

滚动到了工作经历左侧的导航栏那个蓝色的圆圈到工作经历左边用jquery什么事件实现啊回复内容：滚动到了工作经历左侧的导航栏那个蓝色的圆圈到工作经历左边用jquery什么事件实现啊当滚动的时候检测每一个块的offetTop，当这个top小于某个数的时候就激活那个导航的样式。bootstrap的scrollspy.js，可以参考下http://v3.bootcss.com/javascript/#scrollspy这是我很久以前写的，应该能行。//jquery v1.8.3 $(window).scro...

js代码实现微博导航栏

微博导航看起来很美观，实现起来也不麻烦，直接写代码了 <!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><script type="text/javascript">var hiddenChild = function(obj) {var ul = obj.getElementsByTagName("ul")[0];ul.style.display = none;}/**obj表示导航条中的直接li*/var showChild = function(obj) {var ul = obj.getElementsByTagName("ul")[0];ul.style.display = block;}</script><style type...

基于iview-ui的导航栏路径配置（代码示例）

本篇文章给大家带来的内容是关于基于iview-ui的导航栏路径配置（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。上家公司的后台管理系统都是刷表刷出来的，所用很久很久没写后台管理系统了。换了工作后总算要开始捣腾router了，很久没用都快忘光了，所以把一些通用的模块记录一下，也分享给需要的朋友们。经过//router.js let routes = [{path: /,redirect: /admin,},{path: /login,name: login,meta...

如何通过jQuery在页面中固定导航栏【图】

今天将和大家分享一个案例：如何在页面中固定导航栏，有一定的参考价值，希望对大家学习有所帮助。在做导航栏时除了用我们熟悉的html和CSS来布局以外，还需要用到jQuery中scrollTop和scrollLeft知识，它们主要用于设置或者获取垂直滚动条的位置，根据页面被卷曲的高度来固定导航栏位置，接下来在文章中将和大家详细分享。scrollTop返回或设置匹配元素的滚动条的垂直位置。$(selector).scrollTop(offset)offset ：规定相对滚动条顶...

如何禁用layui框架中的侧边导航栏点击事件【图】

我们在工作中经常会用到框架，一款功能齐全又好用的框架的确可以提高工作效率。layui就是一款优秀的前端模块化css框架，且基于jquery，很容易上手。这篇文章主要介绍了layui禁用侧边导航栏点击事件,需要的朋友可以参考下。layui是一款优秀的前端模块化css框架。我用layui做过两个完整的项目，对她的感觉就是，这货非常适合做后台管理界面，且基于jquery，很容易上手。当然，她最大的优点我觉得还是她的模块化方式，相比requirejs，...

Vue活动创建项目之路由设计及导航栏的开发【图】

这篇文章主要介绍了关于Vue活动创建项目之路由设计及导航栏的开发，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下我们直接开始项目，像引入Element-ui这种基础操作我在这里就跳过了项目组件划分根据对项目的分析，我新建了如下几个组件。vue-router路由设计组件新建好以后，我们来设置路由src/router/index.jsimport Vue from vue import Router from vue-router import Index from components/Index import Log...

使用vue如何实现nav导航栏【图】

这篇文章主要为大家详细介绍了vue项目nav导航栏的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下每一个网页项目都少不了导航栏，通过原始的方法基本上都是可以写出来的。但是要写出代码量少，冗余度低的代码就要动脑子思考一下了。最近写了一个百度地图的项目，要求底部有一个导航栏。具体如下图：首先，拿到了底部导航栏的所有图标图片，图片都有两种。灰色的代表未选中，选中的用带样色的图片替换。先看一下，组件...

在vue2.0中通过elementUI制作面包屑导航栏

本篇文章主要给大家详细代码讲解了vue2.0 elementUI制作面包屑导航栏的过程，对此有兴趣的朋友可以学习下。Main.jsvar routeList = []; router.beforeEach((to, from, next) => {var index = -1;for(var i = 0; i < routeList.length; i++) {if(routeList[i].name == to.name) {index = i;break;}}if (index !== -1) { //如果存在路由列表，则把之后的路由都删掉routeList.splice(index + 1, routeList.length - index - 1);} else...

在vue-cli中使用vue-router搭建底部导航栏（详细教程）【图】

这篇文章主要介绍了基于vue-cli vue-router搭建底部导航栏移动前端项目,项目中主要用了Flex布局，以及viewport相关知识，已达到适应各终端屏幕的目的。需要的朋友可以参考下vue.js学习踩坑第一步1.首先安装vue-cli脚手架不多赘述，主要参考 Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目2.项目呈现效果项目呈现网址：www.zhoupeng520.cn/index.html 项目中主要用了Flex布局，以及viewport相关知识，已达到适应各终端屏幕的目的3....

手写移动端惯性滑动&回弹Vue导航栏组件问题（详细教程）【图】

前一段时间我写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab，觉的非常实用，大家可能在做项目时会用到，感兴趣的朋友一起学习吧前段时间写了一个移动端的自适应滑动Vue导航栏组件，觉得有一定实用性，大家可能会用得到（当然有些大佬自己写得更好的话就没必要啦），于是前两天整理了一下，目前已经发布到npm和GitHub上了，点我到npm，点我到GitHub项目，有需要的同学可以在项目中 npm install ly-tab -S 或者 yarn add ly-tab 使...

JavaScript满天星导航栏实现方法【图】

本篇文章给大家分享了JavaScript满天星导航栏实现方法，以前也介绍过很多关于特效导航的制作方法，对此有兴趣的朋友参考学习下。说明分享一个满天星导航栏的效果，代码不多，但效果挺好看，先看看效果图吧。解释实现这个效果，需要掌握的知识不用很多，知道简单的CSS，会用JS 获取元素，能绑定事件基本就足够了。好的，我们直接来看代码，注释已经写的很详细了，不想看有注释的，点这里点击预览。<!doctype html> <html lang="en...

首页 / JAVASCRIPT / JS实现导航栏的透明渐变

JS实现导航栏的透明渐变

内容导读

内容图文

内容总结

内容备注

内容手机端

【JS实现导航栏的透明渐变】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程