wap站点 顶部导航实现 屏幕内容往下滑动,超过一定距离,导航栏变色,回到初始位置,变回原来的颜色

wap站点 顶部导航实现 屏幕内容往下滑动,超过一定距离,导航栏变色,回到初始位置,变回原来的颜色

经过朋友推荐终于在一家公司找到了实习,刚好也是vue,开发经理面试我的时候也没有难为我,问了一些简单的问题,再次感谢!

本人比较菜是真的解决问题的能力还是比较弱的,总是在一些小的问题上浪费很多时间,一个人冥思苦想,在一个局限的范围内,做着一些无谓的尝试,总是离失败很近,成功很远,我要做的是要跳出来,放开视野,在很多地方找到答案.这个问题可能也是阻碍我成长的主要阻碍吧!!!!

在vue中获取当前滚动条的滚动值,这个问题就是解决上面的功能的关键,可是我花了很多时间都没搞定这个问题,让我有很强的挫败感!分享一下我的错误吧!

1. 在mounted(){} 中添加

window.addEventListener(‘scroll‘, this,scrollChange, true)

这个写法没啥问题,你也是可以写在created 钩子里面

1. 我很天真的以为这样就完事了

注:这个slideUp 给元素style属性绑定的值


method(){
    scrollChange(e){
        console.log(e);
        this.slideUp = {
            backgroundColor: "red"
        }
    }  
}

想看看这个scrollY的值有没有改变,谁知道这个对象里面scrollY,一直为零,天啊!我要根据这个scrollY的值得大小来判断和设置顶部导航栏的颜色变换,就这样墨迹了一个下午,没弄好!!!

1. 终于今天下午在图书馆,尝试着再来一次,当我敲下window. 的时候神奇的给我提醒了一个scrollY,我突然明白了什么,卧槽我要的是scrollY的值啊,不是啥非主流的值啊,我管你e对象里面那个 scrollY有没有值,我当前window.scrollY 有值就完事了啊!磨磨唧唧磨磨唧唧的.

  methods: {
    scrollChange(){
      if(window.scrollY >= 50){
        this.slideUp = {
          backgroundColor: "red"
        }
      }else {
        this.slideUp = {}
      }
    }
  }

1. 感觉还是原生js了解的太少了,基础太差,考虑问题太狭隘了.

wap站点 顶部导航实现 屏幕内容往下滑动,超过一定距离,导航栏变色,回到初始位置,变回原来的颜色

原文：https://www.cnblogs.com/lakemonster/p/9866023.html