vue实现吸顶、锚点和滚动高亮按钮效果

最新推荐文章于 2025-02-21 10:06:10 发布

原创

最新推荐文章于 2025-02-21 10:06:10 发布 · 3.7k 阅读

标签

#vue.js #javascript #前端

收录于

本文详细介绍了如何在Vue.js应用中实现页面顶部搜索框和瞄点的吸顶效果，以及瞄点导航的高亮滚动功能。通过监听滚动事件，当滚动条达到特定位置时，将导航和瞄点定位并高亮相应的瞄点区域。同时，文章还展示了如何在用户点击瞄点时实现快速跳转和高亮切换。

一、vue实现吸顶

场景：当页面的滚动条到一定的高度，顶部的搜索框部分和内容区右侧的瞄点部分都会定位到页面中，不会随着页面的滚动而覆盖到上面

在method方法中写：

//   监听滚动条，滚动到一定的距离，侧边栏和顶部导航就会定位
     handleScroll(){
    var topScroll = document.documentElement.scrollTop;
    var widthClient=document.body.clientWidth;
            // console.log(topScroll)
            // 获取导航id
            var nav = document.getElementById("search");
             var dog = document.getElementById("img_dog");
            var target = document.getElementById("miaodian");
            // 滚动距离大于多少时执行下面事件
            if (topScroll > 150) {
                // console.log(ihkh)
                // 到了那个距离相当于给了导航定位
                this.show=false;
                nav.style.position = 'fixed';
                nav.style.width='100%';
                nav.style.height='70px';
                dog.style.width='30%';
                nav.style.backgroundColor='white'