scroll-with-active v1.0.0

用于页面滚动与头部导航菜单联动的js库 依赖vue3和lodash

页面与data结构

<template>
<div class="home">
    <div class="header" ref="headref">
        <span
            v-for="item of headerList"
            :class="{ active: activeHash === item.refHash }"
            @click="goPosition(item.refHash)"
        >{{ item.name }}</span>
    </div>
    <div class="content" ref="myref">
        <div data-refhash="sgwfwoieu" style="padding-top: 30px;">
            <p>首页首页</p>
            <img alt="Vue logo" src="../assets/logo.png" />
        </div>
        <div data-refhash="qweqwt" style="padding-top: 50px">
            <p>用户中心</p>
            <img alt="Vue logo" src="../assets/logo.png" />
        </div>
        <div data-refhash="thredsgee" style="margin-top: 20px;">
            <p>数据中心</p>
            <img alt="Vue logo" src="../assets/logo.png" />
        </div>
        <div data-refhash="flergour" style="margin-top: 50px;">
            <p>产品展示</p>
            <img alt="Vue logo" src="../assets/logo.png" />
            <img alt="Vue logo" src="../assets/logo.png" />
        </div>
        <div data-refhash="ireuhgen" style="margin-top: 50px;">
            <p>价格</p>
            <img alt="Vue logo" src="../assets/logo.png" />
            <img alt="Vue logo" src="../assets/logo.png" />
        </div>
        <div data-refhash="xfchg">
            <p>联系我们</p>
            <img alt="Vue logo" src="../assets/logo.png" />
        </div>
    </div>
</div>
</template>

 const headerList = [{
        name: '首页',
        refHash: 'sgwfwoieu'
    },
    {
        name: '用户中心',
        refHash: 'qweqwt'
    }, {
        name: '数据中心',
        refHash: 'thredsgee'
    }, {
        name: '产品展示',
        refHash: 'flergour'
    }, {
        name: '价格',
        refHash: 'ireuhgen'
    }, {
        name: '联系我们',
        refHash: 'xfchg'
    }]
    

使用

import func from '````'
const {activeHash , goPosition}=func(p1,p2)

p1,p2分别为包裹每一块区域的外层容器未解包的ref节点与未解包的导航header ref节点

activeHash为当前滚动到页面区域的refhash goPosition为跳转到页面对应位置 入参为refhash