In the vue project, the details page scrolls down, and the navigation is selected; click the navigation, and the details page jumps to the designated area

 

 

Requirement 1: When the scroll wheel scrolls down, the navigation is selected 

Requirement 2: When clicking on the navigation, it will jump to the target area

Get the height of the screen in the life cycle

mounted() {
    //获取屏幕高度
    console.log(document.documentElement.clientHeight);//667
  },

Here we consider project optimization anti-shake and throttling This is my summary of anti-shake and throttling CSDN https://mp.csdn.net/mp_blog/creation/editor/121282054

methods:{
    scrollDetailPage(){
        //滚动详情页，滚轮的位置
         console.log(doucument.doucumentElement.srollTop)
    }
}

mounted(){
    //实时监测到滚轮的变化       第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
    doucument.addEventListener("scroll",this.scorllDatailPage,false)
}

Here we must consider performance optimization

Momentary operations will cause these events to be triggered with high frequency . If the callback function of the event is more complicated, it will cause the response to fail to catch up with the trigger, resulting in page freeze and suspended animation

Download the anti-shake plugin 

npm i --save lodash.debounce

 Introduced in vue

var debounce = require('lodash.debounce');

Use the anti-shake plug-in The anti-shake plug-in is actually a function, just put it outside the function

//使用插件
scrollDetailPage:debounce(function(){
    console.log(doucment.doucmentElement.scrollTop)
},1000)

ok, we have used the plugin

scorllDatailPage:debounce(function(){
    //获取导航高度
    //console.log(this.$refs.header.offsetHeight)
    let headerHeight=this.$refs.header.offsetHeight;    
    //滚轮位置,滚轮滚上去了多少
    let oTop=document.doucumentElement.scrollTop;
    //这个地方就非常有意思了，当滚轮滚上去大于200的时候，除以200，就大于1，同时把元素的透明度设为1，让元素显示，当滚轮不大于200时，透明度是慢慢增加，就会有一个渐变的效果
    let opacity=oTop/100 
    if(opacity>=1){
        this.bgOpacity=1
    }else{
        this.bgOpacity=opacity
    }
    //获取每一个大块的自身的高度
    //console.log(doucment.getElementById("wrap_0").offsetHeight);
    //设置一个数组存放高度
    let wrapHeight=[];
    wrapHeight.push(doucument.getElementById("wrap_0"));
    wrapHeight.push(doucument.getElementById("wrap_1"));
    wrapHeight.push(doucument.getElementById("wrap_2"));
    wrapHeight.push(doucument.getElementById("wrap_3"));
    //console.log(window.scrollY)
    let {scrollY}=window;//解构赋值，window的scrollY对象,卷进去的高度
    //reduce遍历数组
    wrapHeight.reduce((prev,value,index)=>{
        if(!document.getElement("wrap_0")&&!document.getElement("wrap_1")
            &&!document.getElement("wrap_2")&&!document.getElement("wrap_3")){
            return;
        }
        if(prev){
            return prev
        }
        if(scrollY+headerHight<=value.offsetHeight+value.offsetTop)
    })
    
},500)

Review the reduce traversal array 

 let arr=[11,22,33,44]
        let sum=arr.reduce((prev,current,index,arr)=>{
            console.log(prev);//第二个参数
            console.log(current);//value
            console.log(index);//index
            console.log(arr);//arr
            return prev+current//prev相当于可以设个起始值，然后数组value循环累加
        },0)
        console.log(sum);

The navigation does not appear at the beginning, and the transparency is 0. When it slides to a certain distance, the navigation appears

//设置导航的背景颜色                   
<div 
    class="detail-header" 
    ref="header" 
    :style="'background:rgba(255,255,255,'+bgOpacity)"// 绑定数据，进行拼串
><div>

//导航中间的内容
<div 
    class="detail-tabs" 
    :style="'opacity:'+bgOpacity"//设置透明度
></div>

//在data中定义一个变量
data(){
    return{
        bgOpacity:0,
    }
}