|
1 問題描述 在制作網(wǎng)頁時，若想讓頂部的導航欄在頁面整體滑動時，導航欄一直在頂部顯示。 準備：引入element組件。 2 算法描述 使用addEventListener() 方法，進行事件監(jiān)聽，用于向指定元素添加事件句柄。 element.addEventListener(event, function, useCapture) 第一個參數(shù)是事件的類型 (如 "click" 或 "mousedown")； 注意:必須。字符串，指定事件名。不要使用 "on" 前綴。例如，使用 "click" ,而不是使用 "onclick"。 第二個參數(shù)是事件觸發(fā)后調(diào)用的函數(shù)； 第三個參數(shù)是個布爾值用于描述事件是冒泡還是捕獲。該參數(shù)是可選的。 具體看代碼注釋。 （一）template 代碼清單 1 <template>
<!-- 導航 -->
<div class="Head ">
<div class="navtop">
<img class="top_picture" src="./assets/9.jpg">
<el-button type="text" class="navbar">觀光&活動</el-button>
<el-button type="text" class="navbar">計劃您的旅程</el-button>
<el-button type="text" class="navbar navbar_1">旅游必備信息</el-button>
</div>
<div class="navend">
<el-button type="text" size="small"><i class="el-icon-search"
style="color: black;margin-top: 12px;"><span> |</span></i></el-button>
<el-button round size="small" style="background:rgba(218, 218, 218, 0.3);border:0px; ">
申請電子簽證
</el-button>
<el-button round size="small" type="success" round> 注冊</el-button>
</div>
</div>
</template> |
SCRIPT樣式 代碼清單 2 <script>
import {
videoPlayer
} from 'vue-video-player'
export default {
name: 'VideoPlayer',
}
window.addEventListener('scroll', function() {
/* 獲取文檔中 class="Head" 的元素：*/
let tou = document.querySelector('.Head');
/* tou.classList.toggle("bian",window.scrollY>0); */
/* 使用此scrollY屬性來檢查使用相對滾動函數(shù)（例如，scrollBy()，scrollByLines()或scrollByPages()）時文檔是否已滾動。*/
if (window.scrollY > 0) {
// classListAPI提供了原生的方式來添加，刪除，切換，或檢查CSS類存在的元素
/* classList.add() 添加類名 */
tou.classList.add("bian");
/* bian 為導航欄滑動時設置的類名 */
} else {
tou.classList.remove("bian");
}
})
</script> |
CSS樣式 代碼清單 3 <style>
/* 導航欄 */
.Head {
width: 100%;
height: 50px;
position: fixed;
top: 0;
left: 0;
right: 0;
justify-content: space-between;
align-items: center;
transition: 0.5s;
display: flex;
z-index: 3;
}
.navtop {
width: 70%;
float: left;
}
.navend {
width: 30%;
float: right;
}
.top_picture {
position: relative;
width: 30px;
height: 30px;
padding-left: 20px;
padding-top: 10px;
}
/* 導航欄 滑動時的樣式設置*/
.bian {
background-color: rgb(255, 255, 255);
}
.bian .Head {
color: rgb(0, 0, 0);
}
.navbar {
margin-left: 10px;
padding-right: 30px;
margin-top: 2px;
color: #000000;
}
.el-button:hover {
color: #e9e9e9;
}
</style> |
具體效果： 
3 結(jié)語 本篇文章主要講的是通過添加addEventListener（）方法來對導航欄滑動時進行樣式的設置。在本次實驗中的圖片未能很好的使其進行居中。本篇文章并未完全講完關(guān)于addEventListener（）方法的參數(shù)，但可以通過教程查看其他消息，同時若想移除 addEventListener() 方法添加的事件句柄則使用 removeEventListener() 方法來移除。 實習編輯：衡輝
|
