mui 仿携程渐变式导航栏详情table顶部悬停，自动切换table

最新推荐文章于 2023-05-30 11:29:05 发布

zz..

最新推荐文章于 2023-05-30 11:29:05 发布

阅读量1k

点赞数

分类专栏： mui + h5 js

本文链接：https://blog.csdn.net/zz18773042258/article/details/83755046

版权

mui + h5 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

使用的muidemo渐变式导航栏进行丰富修改mui.js Transparent.prototype.handleScroll为以下内容

var y = window.scrollY;
var barWrapper = document.querySelector('.brand-bar-wrapper');
var brandBar= document.getElementById('tab');
var wrapper=document.getElementById('refreshContainer');
var div7=document.querySelector('.line-listitem-div7');
var div8=document.querySelector('.line-listitem-div8');
var div9=document.querySelector('.line-listitem-div9');

if (!this.isNativeScroll && e && e.detail) {//不是原生滚动
      y = -e.detail.y;
}

var opacity = (y - this.options.top) / this.options.offset + this._A;//根据滚动距离计算透明度
 opacity = Math.min(Math.max(this._A, opacity), 1);//限制最大为 1

this._style.backgroundColor = 'rgba(' + this._R + ',' + this._G + ',' + this._B + ',' + opacity + ')';//设置导航栏背景

//顶部悬停
var dock = function(){
    if (!brandBar.classList.contains('dock-header-bar')) {
        wrapper.appendChild(brandBar);//这句很重要 
        brandBar.classList.add('dock-header-bar');//设置position: fixed
    }
}
//复原

var reset = function(){
    if (brandBar.classList.contains('dock-header-bar')) {
        barWrapper.appendChild(brandBar);
        brandBar.classList.remove('dock-header-bar');//移除position: fixed

	}
}
//设置table的选中的颜色
var setTableColor=function(index){
    var cell=document.getElementsByClassName('lh38');
    for(var a=0;a<cell.length;a++){
        if(index==a){
            cell[a].classList.add('line-listitem-div5-d-active');
            cell[a].classList.remove('line-listitem-div5-d');
        }else{
            cell[a].classList.remove('line-listitem-div5-d-active');
            cell[a].classList.add('line-listitem-div5-d');
        }
    }
}

				
y > (barWrapper.offsetTop-100) ? dock() : reset();//根据滚动条位置 设定Table悬停，复原;

y > (div7.offsetTop-100) ? setTableColor(1) : setTableColor(0);//设置颜色

if(y > (div8.offsetTop-100) && y < div9.offsetTop-100){setTableColor(2)}
else if(y > (div9.offsetTop-100)){setTableColor(3)}

//console.log(y)
// barWrapper.getBoundingClientRect().top<69 ? dock() : reset();

if (opacity > this._A) {//如果当前导航栏的透明度大于初始值
    this.element.children[1].style.display='block';//显示标题
    this.element.classList.add(CLASS_ACTIVE);//设置选中
    plus.navigator.setStatusBarStyle('dark');//设置手机状态栏字体是黑色
} else {
    this.element.children[1].style.display='none';//隐藏标题
    this.element.classList.remove(CLASS_ACTIVE);//移除选中
    plus.navigator.setStatusBarStyle('light');//设置手机状态栏字体是白色
}

if (this.lastOpacity !== opacity) {
    $.trigger(this.element, 'alpha', {
       alpha: opacity
    });
    this.lastOpacity = opacity;
}

<body>
	<header id="header" class="mui-bar mui-bar-transparent">
		<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" id="refreshContainer">
		<div>
				内容
		</div>
		<div class="brand-bar-wrapper">//悬停table菜单
			<div id="tab" class="brand-store-bar">
					//自定义
			</div>
		</div>
		<div class="line-listitem-div7">
				
		</div>
		<div class="line-listitem-div">
				
		</div>
	</div>
</body>

效果图

zz..

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
mui 仿携程渐变式导航栏详情table顶部悬停，自动切换table

使用的muidemo渐变式导航栏进行丰富修改mui.js Transparent.prototype.handleScroll为以下内容var y = window.scrollY;var barWrapper = document.querySelector('.brand-bar-wrapper');var brandBar= document.getElementById...
复制链接

扫一扫