【求学大作战，视频播放时，向下滚动时，视频播放窗口会保持不动，内容会随着下拉而展示 _vue相关】

求学大作战，视频播放时，向下滚动时，视频播放窗口会保持不动，内容会随着下拉而展示

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

vue相关

详细描述

截图

代码

  // handleScroll为页面滚动的监听回调
    window.addEventListener(
      "scroll",
        this.handleScroll);
    // 监听dom渲染完成
    this.$nextTick(function() {
      // 这里fixedHeaderRoot是吸顶元素的ID
      let header = document.getElementById("fixedHeaderRoot");
      // fixHead是固定头部的id
      let mtHeader = document.getElementById("fixHead");
      // 获取固定头部的高度
      this.mtoffsetHeight = mtHeader.offsetHeight;
      // 这里要得到吸顶元素的距离和元素自身的高度
      this.offsetTop = header.offsetTop;
      this.offsetHeight = header.offsetHeight;
      console.log(
        "offsetTop:" +
          this.offsetTop +
          "," +
          this.offsetHeight +
          "," +
          this.mtoffsetHeight
      );
 handleScroll() {
      // 得到页面滚动的距离
      let scrollTop = this.$refs.viewBox.scrollTop;
      console.log(scrollTop);
      // 判断页面滚动的距离是否大于吸顶元素的位置
      if (scrollTop > this.offsetTop - this.mtoffsetHeight) {
        this.headerFixed = true;
        this.topHeight = this.offsetHeight + this.mtoffsetHeight;
      } else {
        this.headerFixed = false;
        this.topHeight = 0;
      }
    }

编辑于2024-04-27

时间排序

热门排序

[西安|荣耀师兄]JS-许恒倩
0

vue是由组件构成的，handleScroll这个事件不触发是因为把事件加在了window对象上，正确的做法是应该加在这个吸顶页面的组件上，才会触发

查看全部>

编辑于2019-01-05

去第页