实现淘宝首页上下拖动，标题栏效果

很多人觉得这个效果很好写，刚开始我也是这么想的，前前后后写了3、4个效果，怎么看都有些不一样，

刚开始用了ionScroll写的

 ionScroll() {
    var defoultshow = document.getElementById('defaultShow');
    var changeshow = document.getElementById('changeShow');
    var ionheader = document.getElementById('ionheader');

    console.log(this.content.scrollTop)
    if (this.content.scrollTop > 10) {

      defoultshow.style.animation = "defaulshow 3s forwards"
      changeshow.style.animation = "changeshow 3s forwards"
      ionheader.style.animation = "ionheader 3s forwards"

    } else if (this.content.scrollTop <= 10) {
      defoultshow.style.animation = "changeshow1 3s forwards"
      changeshow.style.animation = "defaulshow1 3s forwards"
      ionheader.style.animation = "ionheader1 3s forwards"
    }
  }

这个实现的是啥这个效果：

上拉

3s之后：

下拉：

这个有时间限制，仔细看看支付宝的，手指不松开，标题栏那一块是不动的，

还有写了两个方法，都是用这个写的，都是这样的问题，

然后我就请教了一位老师（买了网上的视频，有技术老师），还有一些写过这个项目的，有些告诉我说，直接用css3就能实现，有的告诉说就用ionScroll就能实现，但是我写了好几个都没有像支付宝那样的效果，我觉得这是个bug，不知道是我观察的和别人观察的是不是不一样，别人说是一模一样的，反正我没有写出来，

 

如果有哪位大神，用ionScroll写出来了，请一定告诉一下我哦，非常感谢！！ 我就是一菜鸟，怎么都出不来，

 

后来，就只能用了js写了，

用了touchmove  touchend   ；

本来写了touchstart，后来发现这个写不写都没有关系，我只是要获取的是scroll的top值，

我刚开是写这么写的：

optionsmove(e) {
    
    // 标题栏
    var defaultShow = document.getElementById('defaultShow');
    var changeShow = document.getElementById('changeShow');
    // 伪标题栏
    var ionheader = document.getElementById('ionheader');// console.log(e);
    // e.preventDefault;
    e.stopPropagation();
    this.starty = e.path[4].scrollTop;
    // console.log(this.starty);
    if (this.starty <= 40 && this.starty > 0) {
      defaultShow.style.opacity = String((this.starty) * 0.025);
      changeShow.style.opacity = String(1 - (this.starty) * 0.025)
      ionheader.style.opacity = String(1 - (this.starty) * 0.025)
      console.log("move小于40");

    }
    else if (this.starty > 40) {
      defaultShow.style.opacity = "1";
      changeShow.style.opacity = '0';
      console.log("move大于40");
    }
  }
  optionsup(e) {
    e.stopPropagation();
    var defaultShow = document.getElementById('defaultShow');
    var changeShow = document.getElementById('changeShow');
    var ionheader = document.getElementById('ionheader');this.starty = e.path[4].scrollTop;
    // console.log(e.path, this.starty);
    
    if (this.starty < 20) {
      this.starty = e.path[4].scrollTop = 0;
      defaultShow.style.opacity = "0";
      changeShow.style.opacity = '1';
      ionheader.style.opacity = "1"
      console.log('end小于20')

    }
    else if (this.starty >= 20) {
      this.starty = e.path[4].scrollTop > 40;
      defaultShow.style.opacity = "1";
      changeShow.style.opacity = '0';
      ionheader.style.opacity = "0";
      console.log('end大于20');
    }

  }

这个效果就是和支付宝上一样的，但是还是有个bug，这个bug就是这个效果有时候没有效果，找了半天，找到bug的根源了

e.path[4]  这个获取的元素应该是scrll-content，但是有时候，e.path[4]又不是这个元素了，so，没有效果，也很正常；

最后我只能，用了原生获取dom的方法，获取这个class（‘scroll-content’）[0];替代了e,path[4]

 

捋了捋思路，现在也只是实现了效果，

里面有很多重复代码，像获取元素的，我试着写在函数的外面，报错，写个封装吧，调用都是红线，反正目前就是这样了，

那位大神在写这个效果的话，如果看到了，非常感谢能给我看一看代码呀，不胜感激

 

转载于:https://www.cnblogs.com/adong69/p/9843786.html