这次是用的防抖函数：debounce。

昨天拿到需求要做个页面，就只有一个首页，但是要有导航栏，导航栏点击后滚动条滚入相应的模块中。

这时候就是使用window对象的滚动条事件

nav的 list: [
	{ to: 'nav-1' ,top:null},
	{ to: 'nav-2' ,top:null},
	{ to: 'nav-3' ,top:null},
	{ to: 'nav-4' ,top:null},
	{ to: 'nav-5' ,top:null},
	{ to: 'nav-6' ,top:null}
]
还有个title字段，由于是项目相关，就不给出来了，to用作title
        jump(id) {
		    	let nav = document.getElementById(id);
			this.changeAlive(id)
			window.scrollTo({
				top: nav.offsetTop - 100,
				behavior: 'smooth'
			});
		},
		changeAlive(id) {
			this.alive = id;
		}

根据选择的id跳入

然后每个模块都给相应的id就行了。

changeAlive 是我根据id给的展示当前nav所在模块然后取不同的样式。

methods:{
		...mapActions(['setScrollValue','setFlag']),
},
mounted() {
		let that = this;
		that.scrollFunc = debounce(() => {
			let NavTop = document.getElementById("nav-2");
			let _scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			that.setScrollValue(_scroll)
			that.show = _scroll >= NavTop.offsetTop - 100
		}, 100);
		window.addEventListener('scroll', that.scrollFunc);
	},
	beforeDestroy() {
		let that = this;
		window.removeEventListener('scroll', that.scrollFunc);
	},

然后就是老一样，用防抖函数，在滚动条滚动的时候，给vuex存储scroll值的scrollValue赋值。

在nav导航栏中监听vuex的scrollValue

watch:{
		scrollValue(n,o) {
			let list = this.list
			for(let i = 0;i<list.length;i++) {
				console.log(this.alive , n , list[i].top )
				if(n-400<=list[i].top) {
					this.changeAlive(list[i].to)
					return;
				}
			}
		}
	},

这样就可以在滚动条滚动的时候也能动态的给nav的alive赋值。

在这里再说一遍防抖函数和节流函数的区别。

防抖函数是删除上一次的操作，再进行下一次的操作。

节流函数是每隔一段时间才会进行一次。

如果这里用节流的话就会出现点击navlink的时候触发了滚动条事件，然后alive切换到其他对象的id再切换到当前。

（别问我为什么知道，我特么挠了二十分钟的头才发现我用错了函数。）

然后这个东东今天就做完了。

（

    一个这么简单的页面要做各种响应式，美工给的移动端图用的750px,但是文字和排版都是375px的，特么降维打击我吐了。

    （恶心的比喻）

）