vue 页面下滚到目标元素的位置，目标元素自动吸顶（自动悬浮吸附到页面顶部）

目录

效果

 实现思路（含核心代码）

完整演示代码

---

 

效果

见天猫商品详情页

页面向下滚动，超过图中标注的元素后，该元素自动吸附到页面顶部 

 实现思路（含核心代码）

1. 监听页面滚动事件

            // 监听页面滚动事件
            window.addEventListener("scroll", this.scrolling)

2. 获取目标元素的位置

            // 获取目标元素与整个文档顶部间的距离
            this.targetTop = document.querySelector('#target').offsetTop

3. 页面向下滚动到目标元素位置时，将目标元素的css样式动态变更为悬浮到页面顶部

        <!--目标元素——页面下滚到该位置，该元素会吸顶-->
        <div class="targetBlock" id="target" :class="{'targetFixed':ifFixed}">
            页面下滚到我这时，我会吸顶哦！（自动悬浮吸附到页面顶部）
        </div>

    .targetFixed {
        position: fixed;
        top: 0px;
    }

scrolling() {
    // 获取当前滚动条向下滚动的距离
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop > this.targetTop) {
        this.ifFixed = true;
    } else {
        this.ifFixed = false;
    }
},

完整演示代码

<template>
    <div>
        <div class="box100">0</div>
        <div class="box100">100</div>
        <!--目标元素——页面下滚到该位置，该元素会吸顶-->
        <div class="targetBlock" id="target" :class="{'targetFixed':ifFixed}">
            页面下滚到我这时，我会吸顶哦！（自动悬浮吸附到页面顶部）
        </div>
        <div class="box100">300</div>
        <div class="box100">400</div>
        <div class="box100">500</div>
        <div class="box100">600</div>
        <div class="box100">700</div>
        <div class="box100">800</div>
        <div class="box100">900</div>
        <div class="box100">1000</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                // 是否吸顶
                ifFixed: false,
                // 目标元素与整个文档顶部间的距离
                targetTop: 0
            }
        },
        mounted() {
            // 监听页面滚动事件
            window.addEventListener("scroll", this.scrolling)
            // 获取目标元素与整个文档顶部间的距离
            this.targetTop = document.querySelector('#target').offsetTop
        },
        methods: {
            scrolling() {
                // 获取当前滚动条向下滚动的距离
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                if (scrollTop > this.targetTop) {
                    this.ifFixed = true;
                } else {
                    this.ifFixed = false;
                }
            },
        }
    }
</script>
<style scoped>
    .targetFixed {
        position: fixed;
        top: 0px;
    }

    .targetBlock {
        background: red;
        height: 100px;
        border: 1px solid black;
        width: 100%;
    }

    .box100 {
        height: 100px;
        background: #3a8ee6;
        border: 1px solid black;
    }
</style>