做了一个导航滚动到顶部冻结的效果，不过为什么.logo那里的max-width:0没有完全生效，而且当有nav-fixed属性时。logo和其他li也没对齐，这是什么原因造成的？

Document

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);*/

我是一幅图

我是隐藏的
我是部分1
我是部分2
我是部分3
我是部分4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore .

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"

}

})

html中的width无效,css max-width失效相关推荐

img标签设置height和width无效
标题:img标签设置height和width无效在img的style中设置即可 <img src="../img/temp/pro01.jpg" style="w ...
CSS的width:100%和width:auto区别
CSS的width:100%和width:auto区别一. 问题前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...
java定义一个盒子类box_定义一个Box(盒子)类,在该类定义中包括数据成员: length(长),width(宽)和height(...
定义一个Box(盒子)类,在该类定义中包括数据成员: length(长),width(宽)和height( 定义一个Box(盒子)类,在该类定义中包括数据成员: length(长),width(宽)和 ...
CSS笔记-width之max-width和min-width
规则:max-width 会覆盖width设置, 但 min-width设置会覆盖 max-width. max-width和width只能有一个,min-width和max-width只能有一个 . ...
css中的优先级最高,css中!important的作用(最高等级)
{*rule !important}这个css规则当今在网页制作的时候的普及已经非常流行了,以前我对它的理解就停留在'浏览器是否识别阶段' 而没有真正去研究过,可是现在发生了变化.众所周知,!impo ...
css中盒子模型图片,CSS 盒子模型
盒子模型(Box Model) 一般的标签都是盒子,但是除了极个别的标签(例如:img.input标签)不是盒子盒子模型的属性 width 盒子内容的宽度 height 盒子内容的高度 margin ...
将多张图整合到一张大图中，再用css定位技术
2019独角兽企业重金招聘Python工程师标准>>> 以前做网站的时候,经常有地方要用小图标.第一次接触bootstrap的时候,下载打开它的源文件的时候只看到了两张图,就是包含很 ...
解决在html中引入font-awesome的css文件后，图标显示不出来
今天小颖在做项目时,需要在html文件中引入font-awesome.min.css,但是引入后: 以前小颖在用font-awesome库里的图标时,都是直接从node中下包,然后在main.js中引 ...
css中ul位置移动,css中ul怎么定位
css中ul怎么定位 css中所有的元素默认都是static定位,要改变ul的定位方式,我们只需要指定元素的css position属性即可. 关于定位的几种方式1.static定位(普通流定位) - ...

html中的width无效,css max-width失效

我是一幅图

html中的width无效,css max-width失效相关推荐

最新文章

热门文章