php标题栏往下移,页面滚动条下移一定距离实现固定导航显示-2019年3月29号

实例

html>

页面滚动条下移一定距离实现固定导航显示

*{margin:0;padding:0;}

.main{

width: 100%;

height:1500px;

background: #ccc;

}

.menu{

width: 100%;

position:fixed;top:0;

z-index:1000;

text-align:center;

background: red;

height: 80px;

line-height: 80px;

display: none;

}

.menu input{

width:280px;

height:30px;

border-radius: 50px;

border:none;

outline:none;

padding-left: 20px;

}

document.οnscrοll=function dismenue(){//document.onscroll事件的含义：当文档滚动条在滚动时触发后面的函数立即执行，此处document也可以是元素，为元素事件。

var omenu=document.getElementsByClassName('menu')[0];

if(document.documentElement.scrollTop>300){

omenu.style.display="block";

}else{

omenu.style.display="none";

}

}

运行实例 »

点击 "运行实例" 按钮查看在线实例