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

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

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

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

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

1. 在mounted(){} 中添加

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

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

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

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


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

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

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

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

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

10.29 今天将方法运用到公司程序里面还是不行! 大佬的方法来了

    1. 给要实现监听的元素,绑定一个scroll事件
```javaScrip
    <div class='main-content' @scoll ="changeScorll"> </div>
```
    2. 直接在methods 方法中书写
```javaScrip
    changeScorll  (e) {
        let scrollY = e.target.scrollTop; //这样就是可以得到当前页面的滚动条的位置了 ;
        this.slideUp.background = `linear-gradient(to bottom, rgba(0,0,0,1),rgba(0,0,0,${Math.min(Math.max(scrollY / (3 * 75), 0.3), 1)})`
        //一对比 发现我的代码,太啰嗦,
}

```