JavaScript基础笔记
程序员文章站
2023-08-24 15:24:15
*对象：window onload = function(){} getElementById('nav').offsetHieght //获取div=nav元素，距离html顶部元素的距离，同类型的还有offsetLeft,offsetRight.offsetBottom 页面滚动事件：
*对象：window
onload = function(){}
getelementbyid('nav').offsethieght //获取div=nav元素，距离html顶部元素的距离，同类型的还有offsetleft,offsetright.offsetbottom
页面滚动事件：
<body>
<div class="top" id="top"></div>
<div class="nav" id="nav"></div>
<div class="main-body" id="menu">
<img src="images/img1.jpg" alt="">
</div>
<div class="footer"></div>
<script type="text/javascript">
/*页面滚动事件*/
window.onscroll = function () {
if(document.documentelement.scrolltop >= document.getelementbyid('top').offsetheight ){
document.getelementbyid('nav').classname = 'nav navfix'
document.getelementbyid('menu').style.margintop="40px"
}else{
document.getelementbyid('nav').classname = 'nav'
document.getelementbyid('menu').style.margintop="0px"
}
}
//==============================================
//document.documentelement.scrolltop 滚动条移动的距离
//document.getelementbyid('top').offsetheight 导航上面top的高度。offsetheight获取,知道固定高度的可以直接用数值代替
//document.getelementbyid('nav').classname = 'nav navfix' .classname= ，给选定的元素添加css样式
//document.getelementbyid('nav').classname = 'nav'
//document.getelementbyid('main-body').style.margintop="40px" 40为nav的高度，为了解决bug，也可以设置为
//其中.nav{ width:100%; height:40px; background:blue;}
//.navifx{ position：fixed; top:0px; }
</script>
/*css样式*/
/*============================
body{
background: pink;
margin:0px;
padding:0px;
}
.top{
width:100%;
height:80px;
background:#ccc;
}
.nav{
width:100%;
height:40px;
background:cornflowerblue;
}
.main-body{
height:1600px;
}
.footer{
width:100%;
height:120px;
background:pink;
}
.navfix{
position:fixed;
top:0px;
}
=============================*/
上一篇： 水仙菜野菜是什么，可以吃吗？
下一篇： 淡竹叶的作用与禁忌