ELEMENT顶部导航栏固定
1 问题描述
在制作网页时，若想让顶部的导航栏在页面整体滑动时，导航栏一直在顶部显示。
准备：引入element组件。
2 算法描述
使用addEventListener() 方法，进行事件监听，用于向指定元素添加事件句柄。
element.addEventListener(event, function, useCapture)
第一个参数是事件的类型 (如 "click" 或 "mousedown")；
注意:必须。字符串，指定事件名。不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。
第二个参数是事件触发后调用的函数；
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
具体看代码注释。
（一）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属性来检查使用相对滚动函数（例如，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 结语
本篇文章主要讲的是通过添加addEventListener（）方法来对导航栏滑动时进行样式的设置。在本次实验中的图片未能很好的使其进行居中。本篇文章并未完全讲完关于addEventListener（）方法的参数，但可以通过教程查看其他消息，同时若想移除 addEventListener() 方法添加的事件句柄则使用 removeEventListener() 方法来移除。
实习编辑：衡辉
稿件来源：深度学习与文旅应用实验室（DLETA）