微客导航 » 文章资讯 » jquery实现吸顶导航效果

jquery实现吸顶导航效果

2023-08-03 09:47:03 168

本文实例为大家分享了jquery实现吸顶导航效果的具体代码，供大家参考，具体内容如下

css:

*{margin:0;padding:0;}
body{
margin:0auto;
max-width:10rem;
}
header{
width:10rem;
height:1rem;
background:red;
position:fixed;
top:0;
left:auto;
}
section{
height:100%;
overflow:auto;
padding:1rem0;
}
.bananers{
width:100%;
height:3rem;
text-align:center;
line-height:3rem;
background:aqua;
}
.mains{
width:100%;
height:1rem;
background:red;
display:flex;
}
.mains>div{
width:100%;
height:100%;
border:1pxsolid#dddddd;
display:flex;
align-items:center;
justify-content:center;
}
.contents{
width:100%;
}
.contents>div{
height:50px;
line-height:50px;
padding-left:10%;
border-bottom:1pxsolidred;
}
footer{
width:10rem;
height:1rem;
background:#0086B3;
position:fixed;
left:auto;
bottom:0;
}
.fixed-top{
position:fixed;
width:100%;
top:1rem;
left:auto;
}
.sticky{
position:-webkit-sticky;/*滚过初始位置时自动吸顶*/
position:sticky;/*吸顶时的定位*/
top:1rem;
left:auto;
z-index:999;/*z-index比下方所有层级要高*/
}

html：

头部

内容

导航1

导航2

导航3

js：

for(vari=0;i<20;i++){
$(".contents").append(`${i+1}`)
}
varheaders=$("header")[0].getBoundingClientRect().height;
varmains=$(".mains").offset().top;
varheights=mains-headers;
$(".bananers").html(mains+"----"+headers);
vartops=document.querySelector('.mains');
functionfixed(num){
varnys=navigator.userAgent;
varisAndroid=nys.indexOf('Android')>-1||nys.indexOf('Adr')>-1;
varisIOS=!!nys.match(/\(i[^;]+;(U;)?CPU.+MacOSX/);
if(isAndroid){
document.body.onscroll=function(e){
varscrollT=document.body.scrollTop;
if(scrollT>num){
$(tops).addClass('fixed-top');
}else{
$(tops).removeClass('fixed-top');
}
};
}elseif(isIOS){
$(tops).addClass('sticky');
}
}
fixed(heights);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jquery实现吸顶导航效果

热门推荐

随机推荐