导航栏-滚动渐变（已封装插件，任意调用）

样式采用mui框架的样式（无须在意）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Hello MUI</title><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="stylesheet" href="static.docs.v1.1/plugins/mui/css/mui.min.css"><style></style></head><body><header id="header" class="mui-bar mui-bar-transparent" style="background-color: rgba(255, 255, 255, 0);"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">导航栏</h1></header><div class="mui-content" style="height: 2000px;"></div>
<script src="static.docs.v1.1/js/jquery.min.3.1.0.js"></script>
<script type="text/javascript">var mui_bar_transparent = $(".mui-bar-transparent").css("backgroundColor");
$(window).scroll(function() {winScroll();
});function winScroll(){var setY = 50; //50pxvar y = $(window).scrollTop();   var percentY = y/setY;// console.log(y+' / '+percentY);    if(y>setY){return false;} else {var obj = rgbOrRgbaToArray(mui_bar_transparent); var str = 'rgba('+obj[0]+','+obj[1]+','+obj[2]+','+percentY+')';// console.log(str);// 实时重置$(".mui-bar-transparent").css("backgroundColor",str);}
}function rgbOrRgbaToArray(colorString){    var rgbOrgbaJudgeTag = /^([^\(]+)\([^\)]+\)$/i;var aaa = rgbOrgbaJudgeTag.exec(colorString);if(aaa!==null){if(aaa[1].trim()==="rgb"){var str = colorString;var strTag = /^rgb[a]*\s*\(([^,]+),([^,]+),([^\)]+)\)$/i;var result = strTag.exec(str);if ( result===null || result[1].trim()==="" || result[2].trim()==="" || result[3].trim()==="" ) {return null;}var returnArray = [];for(var i=1;i<=result.length-1;i++){returnArray[i-1]=Number(result[i].trim());}return returnArray;} else if (aaa[1].trim()==="rgba") {var str = colorString;var strTag = /^rgb[a]*\s*\(([^,]+),([^,]+),([^,]+),([^\)]+)\)$/i;var result = strTag.exec(str);if ( result===null || result[1].trim()==="" || result[2].trim()==="" || result[3].trim()==="" ) {return null;}var returnArray = [];for(var i=1;i<=result.length-1;i++){returnArray[i-1]=Number(result[i].trim());}return returnArray;} else {return null;}} else {return null;}
}</script></body></html>

以上就是关于“导航栏-滚动渐变 - 封装版” 的全部内容。

导航栏-滚动渐变 - 封装版相关推荐

mui案例：导航栏颜色渐变
mui导航栏 · 滚动渐变 · 代码参考代码: <!DOCTYPE html> <html><head><meta charset="utf-8& ...
几句话实现导航栏透明渐变 – iOS
首先我们来看下效果一开始当我们什么只设置了一张图片作为它的头部视图的时候,它是这样的首当其冲的,我们先得把导航栏弄透明那么我们首先得知道,设置navigationBar的BackgroundCo ...
基于 vue2 导航栏透明渐变
在移动或者app 中经常会用,顶部导航栏固定,但是随着页面向上滚动,导航栏的透明度发生变化. 做法为: 1.首先给要滚动变化的导航添加 :style="style" <mt- ...
vue仿今日头条_微信小程序仿今日头条导航栏滚动解析
项目需要,做一个和今日头条一样的导航栏,可以横行滚动,幸好再weui里面看到了类似的例子地址:https://weui.shanliwawa.top/demo/js4.html,使用iscroll- ...
微信小程序----导航栏透明渐变二（MUI导航栏透明渐变）
效果体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 导航栏透明渐变效果实现原理给page-group设置的背景颜色采用rgba; 通过改变rgba其 ...
导航栏透明度渐变; 下拉头视图拉伸效果;勾号动画; 一段文字中点击部分可响应不同事件...
之前通过设置navigationBar的barTintColor设置导航栏颜色,然后拿到self.navigationController.navigationBar.subviews.firstOb ...
纯css实现导航栏滚动
效果图描述一下: 我们在做导航栏时,导航项有很多,父容器容不了会导航换行显示,很不好. 写js计算父容器总宽度要容得下所有导航项又不会(假设不会),怎么处理. 用css解决,往下看: 大容器div: ...
微信小程序----导航栏透明渐变一（MUI导航栏透明渐变）
效果体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! DEMO下载导航栏透明渐变效果实现原理利用position:absolute在导航下定位一个v ...
vue实现tabs侧边导航栏点击内容跳转到对应位置，且内容滚动导航栏切换，封装直接用
<template><div><el-dialogsize="big"title="名字":vi ...

导航栏-滚动渐变 - 封装版

导航栏-滚动渐变（已封装插件，任意调用）

导航栏-滚动渐变 - 封装版相关推荐

最新文章

热门文章

导航栏-滚动渐变 - 封装版

导航栏-滚动渐变 （已封装插件，任意调用）

导航栏-滚动渐变 - 封装版相关推荐

最新文章

热门文章

导航栏-滚动渐变（已封装插件，任意调用）