极客观点
项目管理
HarmonyOS
做了一个导航滚动到顶部冻结的效果，不过为什么.logo那里的max-width:0没有完全生效，而且当有nav-fixed属性时。logo和其他li也没对齐，这是什么原因造成的？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
padding:0;
margin:0;
}
body{
/*transition: all .5s;*/
}
header{
background:url(../common/home_background.jpg) bottom center no-repeat;
background-position: cover;
height:30vh;
width:100%;
}
nav{
background: #ccc;
color:#fff;
position: relative;
transition: all .5s;
top:0;
width:100%;
}
ul{
list-style: none;
font-size:20px;
}
ul>li{
/*padding:5px;*/
display: inline-block;
line-height: 2;
padding:4px 10px;
}
.logo{
max-width:0;
max-height:1em;
overflow: hidden;
transition: all .5s ease;
}
body.nav-fixed nav{
position: fixed;
}
body.nav-fixed .site-wrap{
transform: scale(1);
}
body.nav-fixed .logo{
max-height: 1em;
max-width:200px;
color:red;
}
.site-wrap{
width: 80%;
margin:50px auto;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 2px 2px 10px 2px #ccc;
border-radius: 10px;
transform: scale(.98);
transition: all .5s ease;
height:800px;
}
/*transform: scale(1);*/
</style>
<body>
<header>
<h1>我是一幅图</h1>
</header>
<nav>
<ul>
<li class='logo'>我是隐藏的</li>
<li>我是部分1</li>
<li>我是部分2</li>
<li>我是部分3</li>
<li>我是部分4</li>
</ul>
</nav>
<div class="site-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore .</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
<script>
var nav=document.querySelector("nav");
var navTop=document.querySelector("nav").offsetTop;
var scrollTop=window.scrollY;
window.addEventListener("scroll",function(){
console.log(navTop,scrollY)
if(scrollY>=navTop){
document.body.classList.add("nav-fixed");
document.body.style.paddingTop = nav.offsetHeight + 'px';
// alert(1)
}
else{
document.body.classList.remove("nav-fixed");
document.body.style.paddingTop="0px"
}
})
</script>
</html>
把max去掉试试？