仿知乎导航栏变化（上下来回切换效果）

1.获取导航条位置

...
getScrollTop() {
// 获取滚动条位置
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
console.log(scrollTop)
} else if (document.body) {
scrollTop = document.body.scrollTop;
console.log(scrollTop)
}
return scrollTop;
}
...

2.从下到上或从上到下时的位置，是否向上滚动（定义的变量）

image.png

3.判断处理方法

...
mounted() {
const _this = this;
let scrollTop = 0; // 初始化滚动条为位置为0
let topValue = this.getScrollTop(); // 设置一个标识位，即复制一个滚动条位置，但是这个位置获取的时间比 scrollTop慢，
document.onscroll = function() {
scrollTop = _this.getScrollTop(); // 滚动条的位置
if (scrollTop <= topValue) {
// 当后者滚动条大于前者滚动条时，即认为滚动条向上运动，但是我们设置一个临界值，当大于这个临界值时，即认为是用户有意向上滚动
_this.changeUpDir = scrollTop; // changeUpDir 这个是 刚好从向下滚动到向上滚动改变方向时的位置
if (_this.changeDownDir - scrollTop > 120) {
// 这个是else 里面记录的值减滚动条位置 大于120 即认为是向上滚动
_this.isUp = false;
console.log(_this.isUp);
}
} else {
_this.changeDownDir = scrollTop;
if (scrollTop - _this.changeUpDir > 120) {
_this.isUp = true;
console.log(_this.isUp);
}
}
setTimeout(function() {
topValue = scrollTop;
}, 0);
};
},
...

4.过度动画和移动方式

image.png