使用 vue 做一个专题页面. 滚动页面指定区域导航高亮.
监听滚动页面事件, 对比当前页面的位置与元素的位置, 如果当前滚动的区域位置大于元素的位置, 导航添加 class, 其他去掉 class 进行样式切换.
我使用的方法是在定位元素上添加 id, 在导航添加 data-id 属性, 监听滚动事件, 如果当前滚动区域大于定位元素区域, 将元素的 id 赋值给变量, 然后与导航的 data-id 进行匹配, 切换 class.
html 结构
main.vue
- <template>
- <div class="qz-home">
- <div class="quiz-container">
- <div class="quiz-ad-pic" id="pagetop"></div>
- <div class="quiz-main">
- <div class="quiz-main-inside" id="js-content">
- <quiz-sessions class="item" id="quizhall"></quiz-sessions>
- <quizRecords class="item" id="quizrecord"></quizRecords>
- <quiz-history class="item" id="quizHistory"></quiz-history>
- <quiz-mine class="item" id="quizMine"></quiz-mine>
- <quiz-rank class="item" id="quizRank"></quiz-rank>
- <quiz-rule class="item" id="quizRule"></quiz-rule>
- </div>
- </div>
- <navigation id="js-nav"></navigation>
- </div>
- </div>
- </template>
navigation.vue
- <template>
- <nav class="nav-container">
- <div class="nav-mark"></div>
- <div class="nav-main">
- <ul class="nav-list">
- <li :class="{'cur': curindex === index}" v-for="(item, index) in navList" :key="index" :data-id="item.id"><a @click="linkTo(item.id, index)">{{item.name}}</a></li>
- </ul>
- <div class="backtop" @click="backTop()">
- <a></a>
- </div>
- </div>
- </nav>
- </template>
- JavaScript
- export default {
- name: "Navigation",
- data() {
- return {
- navList: [
- { name: "竞猜大厅", id: "quizhall" },
- { name: "竞猜记录", id: "quizrecord" },
- { name: "历史赛事", id: "quizHistory" },
- { name: "我的竞猜", id: "quizMine" },
- { name: "排行榜", id: "quizRank" },
- { name: "玩法", id: "quizRule" }
- ],
- curindex: 0
- };
- },
- mounted() {
- this.initScroll();
- },
- methods: {
- initScroll() {
- Windows.addEventListener('scroll', function() {
- // 封装类名函数集: 判断, 移除, 增加, 获取 (简单粗暴版);
- function removeClass(obj, cls) {
- if (obj.className == cls) {
- obj.className = "";
- }
- }
- function addClass(obj, cls) {
- if (obj.className != cls) {
- obj.className = cls;
- }
- }
- let pos = document.documentElement.scrollTop;
- if (pos> 300) {
- document.querySelector('.nav-container').style.display = 'block';
- } else {
- document.querySelector('.nav-container').style.display = 'none';
- }
- var menus = document.getElementById("js-nav").getElementsByTagName("li");
- var items = document.getElementById("js-content").querySelectorAll(".item");
- var currentId = "";
- for (var i = 0; i <items.length; i++) {
- var _item = items[i];
- var _itemTop = _item.offsetTop;
- if (pos> _itemTop - 200) {
- currentId = _item.id;
- } else {
- break;
- }
- }
- if (currentId) {
- for (var j = 0; j < menus.length; j++) {
- var _menu = menus[j];
- // href 属性获取的是整个 link, 需以 #为界截除获取最后一个元素;
- var _href = _menu.getAttribute('data-id');
- if (_href != currentId) {
- removeClass(_menu, "cur");
- } else {
- addClass(_menu, "cur");
- }
- }
- }
- })
- }
- }
- };
最后 *
为了帮助大家让学习变得轻松, 高效, 给大家免费分享一大批资料, 帮助大家在成为全栈工程师, 乃至架构师的路上披荆斩棘. 在这里给大家推荐一个前端全栈学习交流圈: 866109386. 欢迎大家进群交流讨论, 学习交流, 共同进步.
当真正开始学习的时候难免不知道从哪入手, 导致效率低下影响继续学习的信心.
但最重要的是不知道哪些技术需要重点掌握, 学习时频繁踩坑, 最终浪费大量时间, 所以有有效资源还是很有必要的.
最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们, 祝福大家在往后的工作与面试中一切顺利.
来源: http://www.jianshu.com/p/51a1b6496152