zoukankan      html  css  js  c++  java
  • css粘性定位sticky的使用

    在做h5页面的过程中,经常会遇到这种情况,页面滚动到一定位置的时候,那个元素需要固定在顶部,之前都是用js去计算再实现,其实用css来实现更加方便

    html:

    <div>
      <p>粘性定位</p>
    </div>

    css:

    div{
      height:200px;
      margin-top:50px;
    }
    p{
      position:sticky;
      top:20px;
    }

    页面滚动到div的位置的时候,p元素就会浮动固定在顶部,超出div就不浮动了。

    实际项目中可能还有其他的需求,例如p元素里面有很多子元素,点击哪个子元素就要滚动到指定的模块位置,或者是滚动到哪个模块位置的时候,p元素的对应子元素就要有选中效果。这种一般就要用js来实现。后面写个例子补上

    补上js处理的例子:

    在methods中添加监听事件handleScroll

    handleScroll() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        let top1 = this.$refs.head1[0].offsetHeight;
        //具体需求根据实际操作
        if (scrollTop > top1) {
            console.log('top2', top2);
        }
    },

    在mounted仲添加滚动监听

    mounted() {
        window.addEventListener('scroll', this.handleScroll);
    },

    在destroyed中移除滚动监听

    destroyed() {
        window.removeEventListener('scroll', this.handleScroll);
    },

    思路大概是这样,后面怎么操作就看具体需求

  • 相关阅读:
    DS博客作业02--栈和队列
    DS博客作业02--线性表
    c博客06-结构
    c博客作业05--指针
    C博客作业04--数组
    博客作业03-函数
    循环结构
    c博客作业01--分支、顺序结构
    我的第一篇博客
    Macos安装JDK1.8
  • 原文地址:https://www.cnblogs.com/chao202426/p/12575618.html
Copyright © 2011-2022 走看看