H5中列表滚动之后分类条的吸顶回显

例如城市名称为一行按钮,点击按钮修改页面列表内容,发生滚动之后,列表吸顶,再次点击按钮,回显到最顶的可吸顶位置

H5中列表滚动之后分类条的吸顶回显

 

 

 

步骤以下

 

// 1.取城市列表距顶部距离
    this.scrollTop = Math.ceil(this.$refs.topRef.getBoundingClientRect().top); //topRef为dom对象的ref
// 2.mounted滚动条的获取
    window.addEventListener("scroll", this.handleScrollx, true);
// 3.取城市列表的滚动距离(mounted中开启滚动监控)
    handleScrollx() {
      // 判断是否需要滚动,只有在滚动条在吸顶出来后菜需要滚动到指定位置
      if (window.pageYOffset >= this.scrollTop) {
        this.showScrollTo = true;
      }
      if (window.pageYOffset < this.scrollTop) {
        this.showScrollTo = false;
      }
    },
// 4.点击事件滚动到指定的位置
      this.scrollTo(); 
// 5.点击城市列表/如果城市列表吸顶了,则重置城市的滚动距离
    scrollTo() {
      if (!this.showScrollTo) return;
      document.documentElement.scrollTop = this.scrollTop;
    },
 

H5中列表滚动之后分类条的吸顶回显

上一篇:SuperMap iServer8C证书过期如何解决


下一篇:MATLAB 保存数据时文件名带有时间戳