前端-js基礎語法-DOM

時間 2019-11-10

標籤前端基礎語法 dom 欄目 JavaScript 简体版

原文原文鏈接

DOM的事件操做 javascript

1、JavaScript的組成

JavaScript基礎分爲三個部分：css

ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。html
DOM：文檔對象模型，操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等。java
BOM：瀏覽器對象模型，操做瀏覽器部分功能的API。好比讓瀏覽器自動滾動。python

2、事件

JS是以事件驅動爲核心的一門語言。

事件的三要素

事件的三要素：事件源、事件、事件驅動程序。ios

好比，我用手去按開關，燈亮了。這件事情裏，事件源是：手。事件是：按開關。事件驅動程序是：燈的開和關。後端

再好比，網頁上彈出一個廣告，我點擊右上角的X，廣告就關閉了。這件事情裏，事件源是：X。事件是：onclick。事件驅動程序是：廣告關閉了。數組

因而咱們能夠總結出：誰引起的後續事件，誰就是事件源。瀏覽器

總結以下：app

事件源：引起後續事件的html標籤。
事件：js已經定義好了（見下圖）。
事件驅動程序：對樣式和html的操做。也就是DOM。

代碼書寫步驟以下：（重要）

（1）獲取事件源：document.getElementById(「box」); //相似與ios語言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
（2）綁定事件：事件源box.事件onclick = function(){ 事件驅動程序 };
（3）書寫事件驅動程序：關於DOM的操做

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         #active{
 8             background-color: greenyellow;
 9             width: 100px;
10             height:100px;
11         }
12     </style>
13 </head>
14 <body>
15     <div id='active'></div>
16     <script type="text/javascript">
17         // 獲取dom
18         var odiv = document.getElementById('active');
19         //綁定事件
20         var isgreen = true;  //本次目的是點擊變色且變寬而後隱藏掉，再單擊變回來，故須要一個判斷條件
21         odiv.onclick = function(){
22             // 驅動程序放在匿名函數裏面,執行操做，要實現的效果
23             // 全部的帶-的，改變標籤的樣式在js裏都用駝峯體寫，如background-color就爲backgroundColor
24             if (isgreen) {
25                 odiv.style.backgroundColor = 'red';
26                 odiv.style.width = '200px';
27                 odiv.style.display = 'none';
28                 isgreen = false;    //記得變量有提高 var isgreen；
29             }else {
30                 odiv.style.backgroundColor = 'greenyellow';
31                 isgreen = true;
32             }
33         };
34     </script>
35 </body>
36 </html>

代碼演練

常見事件以下：

一、獲取事件源的方式（DOM節點的獲取）

獲取事件源的常見方式以下：

1 var div1 = document.getElementById("box1");      //方式一：經過id獲取單個標籤
2  
3 var arr1 = document.getElementsByTagName("div1");     //方式二：經過 標籤名 得到 標籤數組，因此有s
4  
5 var arr2 = document.getElementsByClassName("hehe");  //方式三：經過 類名 得到 標籤數組，因此有s

二、綁定事件的方式

　　一、匿名函數
　　二、普通函數用的是函數名fun
　　三、行內模式用的是fun(),且對象想改變屬性，不能用this

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 
 7 </head>
 8 <body>
 9     <div id="first" class="active"></div>
10     <script type="text/javascript">
11         // DOM  Document Object Model  文檔對象模型 全部的doc事件方法都在裏面
12         document.write(window)  //[object Window]
13         console.log(window) //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
14 
15         // 文檔
16         document.write(document) //[object HTMLDocument]
17         console.dir(document)  // #document
18 
19         // html
20         document.write(document.documentElement)  //[object HTMLHtmlElement]
21         console.log(document.documentElement) // 獲取怎麼html文件裏的全部內容顯示全部的標籤，經過這個操做全部的標籤
22 
23 
24         //body 獲取body標籤的內容
25         document.write(document.body)
26         console.log(document.body)
27 
28         // dom 操做三步走：
29         // 一、獲取事件對象（就是想操做的對象）
30         // 二、綁定事件（怎麼幹，點擊鼠標，鼠標懸浮，建立標籤等等），全部的事件方法，js都已定義好，只需按需調用
31         // 三、事件驅動程序（執行的操做，如改變對象的顏色，字體等等）
32 
33         //獲取dom三種方式：
34         var odiv = document.getElementById('first');  //  經過id獲取單個標籤
35         var odiv1 = document.getElementsByClassName('active'); // 經過 類名 得到 標籤數組，因此有s(相同的類能夠被多個標籤引用，因此是數組，如需具體到某一個加上索引便可)
36         var odiv2 = document.getElementsByTagName('div');//經過 標籤名 得到 標籤數組，因此有s
37 
38 
39         // 綁定dom三種方式：
40         // 一、匿名函數
41         // 二、普通函數    用的是函數名fun
42         // 三、行內模式    用的是fun(),且對象想改變屬性，不能用this
43 
44         // 一、經過匿名函數綁定，最經常使用
45         odiv.onclick = function(){
46             // 驅動程序
47         }
48 
49         // 二、經過先定義普通函數，先寫好邏輯，再綁定
50         function add(obj){
51             obj.style.backgroundColor = 'red';
52         }
53         odiv.onmouseover = add;  // 綁定的是函數名，而不是add(),由於add()是函數執行的結果
54     </script>
55 
56      <!-- 三、行內綁定：注意對象本身改變本身的屬性仍是須要經過document來 -->
57     <div id="box3" onclick="fun()"></div>
58     <script type="text/javascript">
59         function fun(){
60             box3.style.backgroundColor = 'green';
61             //或
62             document.getElementById('box3').style.backgroundColor = 'green';
63         }
64     </script>
65 </body>
66 </html>

獲取dom及綁定dom三種方法

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style type="text/css">
  7         #active{
  8             background-color: greenyellow;
  9             width: 100px;
 10             height:100px;
 11         }
 12         .box{
 13                 background-color: red;
 14                 width: 100px;
 15                 height: 100px;
 16             }
 17             .box1{
 18                 width: 200px;
 19                 height: 200px;
 20                 background-color: yellow;
 21             }
 22             .active{
 23                 background-color: red;
 24             }
 25     </style>
 26 </head>
 27 <body>
 28     <div id='active'></div>
 29     <!-- 經過id獲取對象：返回單一對象 -->
 30     <script type="text/javascript">
 31         // 獲取dom
 32         var odiv = document.getElementById('active');
 33         //綁定事件
 34         var isgreen = true;  //本次目的是點擊變色且變寬而後隱藏掉，再單擊變回來，故須要一個判斷條件
 35         odiv.onclick = function(){
 36             // 驅動程序放在匿名函數裏面,執行操做，要實現的效果
 37             // 全部的帶-的，改變標籤的樣式在js裏都用駝峯體寫，如background-color就爲backgroundColor
 38             if (isgreen) {
 39                 odiv.style.backgroundColor = 'red';
 40                 odiv.style.width = '200px';
 41                 // odiv.style.display = 'none';
 42                 isgreen = false;    //記得變量有提高 var isgreen；
 43             }else {
 44                 odiv.style.backgroundColor = 'greenyellow';
 45                 odiv.style.width = '100px';
 46                 isgreen = true;
 47             }
 48         };
 49     </script>
 50 
 51 
 52 
 53     <!-- 經過類獲取對象：返回數組 -->
 54     <div class="box"></div>
 55 
 56     <div class="box1" id="box1">girl</div>
 57 
 58     <script type="text/javascript">
 59         var isNow = true;
 60         var odiv = document.getElementById('box1'); //指定事件對象
 61         // 熟練了能夠不指定事件對象直接寫
 62         // js裏的this和麪向對象的self同樣，表示對象本身，即事件對象
 63         // 下面三種方式都表示指定對象
 64         document.getElementById('box1').onclick = function(){  //綁定事件
 65             console.log(document.getElementById('box1'));
 66             console.log(odiv);
 67             console.log(this);
 68 
 69             if (isNow) {
 70                 // className爲類名，this.className表示對象本身的類名，即爲標籤指定的類名
 71                 // odiv.className = odiv.className + 'active';
 72                 // 後聲明的類優先級要高active是後聲明的
 73                 this.className = this.className + ' active';
 74                 isNow = false;
 75             }else {
 76                 //再次點擊還原
 77                 this.className = 'box1';
 78                 isNow = true;
 79             }
 80         };
 81     </script>
 82 
 83     <!-- 經過標籤獲取對象，返回數組 -->
 84     <script type="text/javascript">
 85 
 86             function $(obj){
 87                 // 封裝查找事件對象通用函數
 88                 return document.getElementsByTagName(obj)[0]
 89             };
 90 
 91             // 經過標籤找對象
 92             var obutton = document.getElementsByTagName('button')[0];
 93             // 應用上封裝函數則以下
 94             var obutton = $('button');
 95 
 96             // 改變標籤內部的一些屬性如 id 、class、title、style
 97             // img( src alt) a(href)  input(type name value placeholder)  from(action method)
 98             // 直接訪問document.getElementsByTagName('img')[0].src等等
 99 
100             $('img').src = '../install/html/mi_picture/logo16366.gif';
101             $('img').alt = 'dada';
102             $('a').href = 'http://www.baidu.com';
103 
104             console.log($('div').innerText)
105             // 結果： 更改  隱藏     happy一下
106 
107 
108             console.log($('div').innerHTML)
109             // <button class="python">更改</button>
110             // <button class="python">隱藏</button>
111             // <input type="text" placeholder="love ">
112             // <img src="../install/html/mi_picture/logo16366.gif" alt="dada">
113             // <a href="http://www.baidu.com">happy一下</a>
114 
115             innerText 獲取的是文本，添加的也是文本
116             innerHTML 獲取的是全部的文本加標籤，添加標籤及文本
117         </script>
118 
119 </body>
120 </html>

獲取dom三種方式詳細演練

Dom對於值得操做

/ 改變標籤內部的一些屬性如 id 、class、title、style
// img( src alt) a(href) input(type name value placeholder) from(action method)
// 直接訪問document.getElementsByTagName('img')[0].src等等
// innerText 獲取的是文本，添加的也是文本，更改得標籤內全部得內容
// innerHTML 獲取的是全部的文本加標籤，添加標籤及文本，可向標籤中直接插入一個標籤，如‘<a href= 'http://www.lang.com'>百度一下</a>’

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div>
 9         <img src="" alt="">
10         <button>隱藏</button>
11         <input type=""  placeholder="happy一下" value="">
12         <a href="">奮鬥的歲月</a>
13     </div>
14 
15 
16     <script type="text/javascript">
17             // 改變標籤內部的一些屬性如 id 、class、title、style
18             // img( src alt) a(href)  input(type name value placeholder)  from(action method)
19             // 直接訪問document.getElementsByTagName('img')[0].src等等
20             // innerText 獲取的是文本，添加的也是文本
21             // innerHTML 獲取的是全部的文本加標籤，添加標籤及文本
22             function $(obj){
23                 return document.getElementsByTagName(obj)[0];
24             };
25 
26             //直接操做屬性
27             $('img').src = '../install/html/mi_picture/logo16366.gif';
28             $('img').alt = 'dada';
29             $('a').href = 'http://www.baidu.com';
30 
31             // 答應innerText 與innerHTML的區別
32             console.log($('div').innerText)
33             // 結果：   隱藏     happy一下  奮鬥的歲月
34 
35             console.log($('div').innerHTML)
36             // 結果：
37             // <button class="python">更改</button>
38             // <button class="python">隱藏</button>
39             // <input type="text" placeholder="love ">
40             // <img src="../install/html/mi_picture/logo16366.gif" alt="dada">
41             // <a href="http://www.baidu.com">happy一下</a>
42     </script>
43 </body>
44 </html>

 innerHTML添加文本：
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div>
 9         <button>提交</button>
10     </div>
11     <script type="text/javascript">
12         var oDiv = document.getElementsByTagName('div')[0]
13         var oBun = document.getElementsByTagName('button')[0]
14         oBun.onclick = function(){
15             // 第一種向標籤中插入內容
16         oDiv.innerHTML = '<h1>個人青年時代</h1>'
17         // 模板字符串ecm6中，反引號，插入變量名 ${name}這樣內容能夠變化
18         var name = 'wen';
19         var age = '30';
20         oDiv.innerHTML = `<ul>
21             <li>${name}</li>
22             <li>${age}</li>
23         </ul>`
24 
25         };
26         
27     </script>
28 </body>
29 </html>

案例1：點擊按鈕，關閉圖片，再點擊，顯示圖片，同時按鈕得文字也跟着改變【這個小例子可擴展爲導航欄上面的廣告，點擊X 關閉廣告】

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div>
 9         <img src="" alt="">
10         <button>隱藏</button>
11     </div>
12     <script type="text/javascript">
13             // 需求：點擊按鈕，隱藏圖片，，再點擊，顯示圖片且按鈕文字造成提示
14             // 這個小例子可擴展爲導航欄上面的廣告，點擊X 關閉廣告
15             var obuttons = $('button');   //獲取對象,第一個按鈕
16             var oimg = $('img')
17             var isShow = true;
18             obuttons.onclick = function(){
19                 if (isShow) {
20                     oimg.style.display = 'none';
21                     obuttons.innerText = '顯示';  //按鈕文字默認爲隱藏
22                     isShow = false;  // 改變條件
23                 }else {
24                     oimg.style.display = 'block';
25                     obuttons.innerText = '隱藏';
26                     isShow = true;
27                 }
28             };
29     </script>
30 </body>
31 </html>

經過按鈕操做圖片得顯示和隱藏

阻止默認事件發生：

常見的有a標籤的自動轉超連接及submit按鍵自動提交表單信息，故在js中若有操做需提早阻止默認事件發生，執行咱們本身寫的邏輯。

阻止a標籤的默認事件小技巧：<a href=javascript:void(0);>
另外一種方法：event.preventDefault()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>京東廣告欄</title>
 6     <style type="text/css">
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         .top_banner{
13             width: 100%;
14             background-color: rgb(230,15,82);
15         }
16 
17         .container{
18             width: 1190px;   /*京東的中間盒子*/
19             margin: 0 auto;  /*盒子居中*/
20             position: relative;
21         }
22 
23         .top_banner .container .banner{
24             display: block;
25             width: 100%;
26             height: 80px;
27             background: url(http://img11.360buyimg.com/da/jfs/t23038/322/2050889343/74857/ef45186e/5b7276c9Na1fe6db5.jpg) no-repeat center 0;
28                 /*設置背景圖，不平鋪，居中顯示*/
29         }
30 
31         .top_banner .container .close{
32             /*display: block;*/
33             position: absolute;
34             /*定位的標籤就脫離標準文檔流，能夠設置寬高了*/
35             right: 0;
36             top:0;
37             /*上面這兩個必定要加，否則就會在父塊的內容後面，想浮起來左上角對其，就必須加*/
38             width: 20px;
39             height: 20px;
40             color: white;
41             text-align: center;
42             line-height: 20px;
43             text-decoration: none;
44 
45         }
46 
47         .hide{
48             display: none;   /*隱藏能夠在原類的屬性上加上此類便可，一個標籤有多個權重相同的類，從上到下，後面的覆蓋前面的*/
49         }
50 
51 
52     </style>
53 </head>
54 <body>
55     <div class='top_banner' id="top_banner">
56         <div class="container">
57             <a href="#" class="banner" id="banner"></a>
58             <a href="http://www.baidu.com" class="close" id="closeBanner">X</a>
59         </div>
60     </div>
61     <script type="text/javascript">
62         // 需求：當點擊x的時候，隱藏廣告欄，且不進行跳轉等動做
63         var oClose = document.getElementById('closeBanner')  // 獲取事件對象
64         oClose.onclick = function(event){
65             event.preventDefault();  // 阻止當前標籤的默認事件，很是重要！！！！
66             document.getElementById('top_banner').className += ' hide';  // 字符串拼接
67             // 注意‘ hide’裏hide前須要加一個空格，否則加到標籤中和其它的類字符串寫在一塊兒了會失效
68 
69             // 點擊x後，跳轉到其它動做了如其它網頁，這是不對的，需求阻止這個自動事件
70             document.getElementById('top_banner').style.display = 'none';
71         }
72     </script>
73 </body>
74 </html>

電商廣告欄關閉案例

DOM（Document Object Model）中各節點事件對象的分佈：

// DOM 文檔對象模型全部的dom事件方法都在裏面
　　document.write(window) //[object Window]
　　console.log(window) //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

// 文檔
　　document.write(document) //[object HTMLDocument]
　　console.dir(document) // #document

// html
　　document.write(document.documentElement) //[object HTMLHtmlElement]
　　console.log(document.documentElement) // 獲取html文件裏的全部內容顯示全部的標籤，經過這個操做全部的標籤，除了一行沒有<!doctype html>表示dom文檔；

//body 獲取body標籤的內容
　　document.write(document.body)
　　console.log(document.body)

入口函數

理論基礎：js的加載是和html同步加載的

window窗口包括：bom + dom

window加載順序： html加載完成，生成dom樹
　　　　　　即先文檔加載dom，再圖片加載，都加載完成表示窗口加載完成；

場景：

　　爲了統一將js放在一塊兒，div放在一塊兒，結構分明，這就致使js可能放在div前面。

做用：

　　解決元素在定義以前使用，即script在div寫，不加的話因從上到下執行找不到而報錯。同時保證整個頁面全部元素即標籤加載完畢後再執行js內容。

使用方法：

將使用元素的代碼放在onload裏面
　　　　<script>
　　　　　　window.onload = function(){
　　　　　　　　　　後面的function就是回調函數

　　　　　　　　　　js代碼……
　　　　　　}
　　　　</script>

缺點：
一、覆蓋現象，若是文檔中不當心寫了多個windwow.onload，後面的會覆蓋前面的。

二、window.onload必須等窗口加載完成後才能執行裏面的方法，若是網上差，圖片等須要好久才能加載完成的緣由，致使須要一直等待圖片加載完成才能執行window.onload的代碼，體驗會很是差，解決方案就是加載dom即加載html裏的全部標籤，圖片無論，這樣體驗就很好了，框架裏都是這樣作的。
　　　　document.onload = function(){
　　　　　　　　全部操做對象的操做都放在這裏，就不會發生找不到對象的error了，就不會因js放在對象前面而沒法執行，返回undefined
　　　　}

BOM對象【瀏覽器】

實例：錨點值的跳轉

知識：window.location能夠簡寫成location。location至關於瀏覽器地址欄，能夠將url解析成獨立的片斷。

location對象的屬性 http://www.javashuo.com/article/p-vkbtzbvw-kr.html

href：跳轉
hash 返回url中#後面的內容，包含#
host 主機名，包括端口
hostname 主機名
pathname url中的路徑部分
protocol 協議通常是http、https
search 查詢字符串

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>錨點值跳轉</title>
 6 </head>
 7 <body>
 8     <!-- history  hash -->
 9     <a href="#/login">登陸</a>
10     <a href="#/register">註冊</a>
11     <div id="app"></div>
12 
13     <script>
14          //錨點值的跳轉，bom中的location事件
15 
16         window.onhashchange = function () {
17             console.log(location.hash);
18             var oDiv = document.getElementById('app');
19             switch (location.hash) {
20                 case '#/login':
21                     //將來要與後端進行的交互的代碼
22                     oDiv.innerHTML = '<h2>我是登陸頁面</h2>'
23                     break;
24                 case '#/register':
25                     oDiv.innerHTML = '<h2>我是註冊頁面</h2>'
26                     break;
27                 default:
28                     oDiv.innerHTML = '<p>人生苦短，我學python</p>'
29                     break;
30             }
31         };
32     </script>
33 </body>
34 </html>

錨點值跳轉

實例：固定導航欄及滾動監聽

知識：固定定位+ dom中的盒子位置獲取方法 offsettop，scrollTop

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style type="text/css">
  7         *{
  8             padding: 0;
  9             margin: 0;
 10         }
 11         ul{
 12             list-style: none;
 13         }
 14         a{
 15             text-decoration: none;
 16         }
 17         input{
 18             border: 0;
 19             outline: none;
 20         }
 21         body{
 22             /*padding-top: 80px;*/
 23         }
 24         .header{
 25             width: 100%;
 26             height: 70px;
 27             background-color: black;
 28             /*display: none;*/
 29         }
 30         .w{
 31             width: 1210px;
 32             overflow: hidden;
 33             margin: 0 auto;
 34         }
 35         .header ul li{
 36             float: left;
 37             width: 242px;
 38             height: 70px;
 39             line-height: 70px;
 40             text-align: center;
 41             background-color: blue;
 42 
 43         }
 44         .header ul li a{
 45             display: block;
 46             width: 242px;
 47             height: 70px;
 48             color: #fff;
 49         }
 50 
 51         /*固定導航欄*/
 52         .header-fix{
 53             width: 100%;
 54             height: 80px;
 55             background-color: white;
 56             box-shadow: 0 0 5px #888;
 57             display: none;
 58             position: fixed;
 59             top: 0;
 60             left: 0;
 61             z-index: 99999;
 62             /*margin-bottom: 10px;*/
 63         }
 64         .header-fix .logo{
 65             float: left;
 66             width: 117px;
 67             height: 57px;
 68             padding-top: 23px;
 69         }
 70         .header-fix .fm{
 71             float: left;
 72             width: 700px;
 73             height: 80px;
 74             margin-left: 100px;
 75         }
 76         .fm input[type='text']{
 77             float: left;
 78             width: 578px;
 79             height: 50px;
 80             border-top: 1px solid #999;
 81             border-left: 1px solid #999;
 82             border-bottom: 1px solid #999;
 83             margin-top: 15px;
 84             padding-left: 20px;
 85             font-size: 20px;
 86         }
 87         .fm input[type='submit']{
 88             float: left;
 89             width: 100px;
 90             height: 52px;
 91             background-color: #38f;
 92             position: relative;
 93             top: 15px;
 94             color: #fff;
 95             line-height: 52px;
 96             font-size: 18px;
 97         }
 98         .box1{
 99             width: 100%;
100             height: 200px;
101             background-color: red;
102         }
103         .box2{
104             width: 100%;
105             height: 300px;
106             background-color: green;
107         }
108 
109     </style>
110 </head>
111 <body style="height: 2000px">
112     <div class="header">
113         <div class="w">
114             <ul>
115                 <li><a href="#">網站導航</a></li>
116                 <li><a href="#">網站導航</a></li>
117                 <li><a href="#">網站導航</a></li>
118                 <li><a href="#">網站導航</a></li>
119                 <li><a href="#">網站導航</a></li>
120             </ul>
121         </div>
122     </div>
123     <div class="header-fix">
124         <div class="w">
125             <div class="logo">
126                 <img src="./logo_top.png" alt="">
127             </div>
128             <form class="fm">
129                 <input type="text" name="">
130                 <input type="submit" name="" value="百度一下">
131             </form>
132         </div>
133     </div>
134     <div class="box1"></div>
135     <div class="box2"></div>
136     <a href="javscript:void(0);">百度</a>
137 
138     <!-- e.preventDefault(); -->
139 
140     <script type="text/javascript">
141         window.onload = function(){
142             var box2Height = document.getElementsByClassName('box2')[0];
143             var fixBox = document.getElementsByClassName('header-fix')[0];
144             var headerBox = document.getElementsByClassName('header')[0];
145 
146             window.onscroll = function(){
147                 console.log(box2Height.offsetTop);
148                 if (document.documentElement.scrollTop >=box2Height.offsetTop) {
149                     fixBox.style.display = 'block';
150                     document.body.style.paddingTop = '80'+ 'px';
151                     headerBox.style.display = 'none';
152                 }else{
153                     fixBox.style.display = 'none';
154                     document.body.style.paddingTop = '0'+ 'px';
155                     headerBox.style.display = 'block';
156                 }
157             }
158         }
159     </script>
160 
161 </body>
162 </html>