JavaScript基礎筆記

時間 2019-11-15

原文原文鏈接

頂級對象：windowjavascript

onload = function(){}

getElementById('nav').offsetHieght //獲取div=nav元素，距離html頂部元素的距離，同類型的還有offsetLeft,offsetRight.offsetBottom

頁面滾動事件：css

<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樣式*/

/*============================html

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;
}java

.navfix{
position:fixed;
top:0px;
}spa

=============================*/code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。