vue使用原生js实现滚动页面跟踪导航高亮
- 需要使用vue做一个专题页面。
- 滚动页面指定区域导航高亮。
- BetterScroll:可能是目前最好用的移动端滚动插件
- 如何自定义CSS滚动条的样式?
监听滚动页面事件,对比当前页面的位置与元素的位置,如果当前滚动的区域位置大于元素的位置,导航添加class,其他去掉class进行样式切换。
我使用的方法是在定位元素上添加id,在导航添加
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" :javascript</p>
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() {
let _this = this;
// 监听页面滚动事件
window.addEventListener('scroll', function() {
var removeClass = function(obj, cls) {
if (obj.className == cls) {
obj.className = "";
}
}
var addClass = function(obj, cls) {
if (obj.className != cls) {
obj.className = cls;
}
}
let pos = document.documentElement.scrollTop;
if (pos > 300) {
_this.isVisibleNav = true;
} else {
_this.isVisibleNav = false;
}
// 获取全部导航dom与元素dom
var navList = document.querySelector("#js-nav").querySelectorAll("li");
var items = document.querySelector("#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;
}
}
// 如果已赋值了变量,进行匹配,如果匹配则添加class其他删除
if (currentId) {
for (var j = 0; j < navList.length; j++) {
var _navItem = navList[j];
var _navId = _navItem.getAttribute('<a href="https://www.zybuluo.com/EncyKe/note/257932#js%E5%AF%BC%E8%88%AA%E6%9D%A1%E5%8D%95%E9%A1%B5%E9%9D%A2%E6%BB%9A%E5%8A%A8%E7%9B%91%E8%A7%86" rel="nofollow noreferrer">参考的文章地址</a></p>
原文地址:https://segmentfault.com/a/1190000016798454
vue使用原生js实现滚动页面跟踪导航高亮的更多相关文章
- html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮
在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...
- h5滚动页面固定导航
1.需要效果 2.实现方法 (1)原生js实现 document.addEventListener('scroll', function (event) { var scrollDamo = wind ...
- 原生js 平滑滚动到页面的某个位置
window.scrollTo() 语法1: window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标. y-coord 是文档中的纵轴坐标. 例子: w ...
- Vue结合原生js实现自定义组件自动生成
就目前三大前端主流数据驱动框架(vue,ng,react)而言,均具有创建自定义组件的api,但都是必须先做到事先写好挂载点,这个挂载点可以是原有静态元素标签也可以是自定义模板:对于多种组件通过同一数 ...
- 用原生js实现一个页面乘法口诀表
今天我自己用js实现了一个页面乘法口诀表(如图)来共享给大家,做的不是很好,如果大家有新的想法可以跟我交流哦. 代码如下: <!doctype html><html lang=&qu ...
- Vue使用Clipboard.JS在h5页面中复制内容
安装clipboard.js github路径:https://github.com/zenorocha/clipboard.js 安装: npm install clipboard --save 引 ...
- 原生js获取到页面上所有的checkbox
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- 「Vue」起步 - vue-router路由与页面间导航
vue-router 我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理.可以说所有的后端开发都是这样做的,而前端路由是不存在"请 ...
- 【吉光片羽】js横向滚动与浮动导航
1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...
随机推荐
- Python模块介绍
模块 1.模块定义 用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能),本质上就是.py结尾python文件 分类:内置模块(又称标准库)执行 help('modules')查看所 ...
- HDU1296 Polynomial Problem
http://acm.hdu.edu.cn/showproblem.php?pid=1296 随手练习 #include <bits/stdc++.h> using namespace s ...
- 【aspnetcore】添加自定义json配置文件
打开program.cs文件,修改CreateWebHostBuilder方法: public static IWebHostBuilder CreateWebHostBuilder(string[] ...
- SpringCloud 分布式配置中心
SpringCloud 分布式配置中心 服务端 创建工程并完善结构 国际惯例,把maven工程创建完善 pom.xml <?xml version="1.0" encodin ...
- FastDFS整合Nginx
浏览器访问FastDFS存储的图片需要通过Nginx访问 需要安装fastdfs-nginx-module.Nginx 安装fastdfs-nginx-module模块 (1)将fastdfs-ngi ...
- Hbase region查找过程
HBase的table是该region切分的,client操作一个row的时候,如何知道这个row对应的region是在哪台Region server上呢?这里有个region location过程. ...
- PHP_RAW_POST_DATA特性
在PHP5.6.x中已废止特性 使用 always_populate_raw_post_data 会导致在填充 $HTTP_RAW_POST_DATA 时产生 E_DEPRECATED 错误. 请使用 ...
- 对比java和python对比
对比java和python 对比java和python 2011年04月18日 1.难易度而言.python远远简单于java. 2.开发速度.Python远优于java 3.运行速度.java远优于 ...
- userBean的删除
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
- MovieReview—NINE LIVES(九条命)
Struggle & Family A successful middle-aged man in the movie became a cat by falling from ...