fixed定位页面跟随滚轮滑动效果

最新推荐文章于 2024-10-30 19:10:39 发布

前端攻城狮·左大

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量104

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46719868/article/details/142653369

版权

handleFixed() {
            const scrollTop = document.documentElement.scrollTop
                || document.body.scrollTop;
            const scrollLeft = document.documentElement.scrollLeft
                || document.body.scrollLeft;
            document.querySelector('header.el-header').style.top = -scrollTop + 'px';
            const offsetTop = this.isShowAd ? 218 : 102;
            const baseLeft = 195;
            this.$refs['param-content'].style.top = -scrollTop + 102 + 'px';
            this.$refs.menu.style.top = this.isShowAd ? (-scrollTop + 218 <= 0 ? -218 : -scrollTop) + 'px' : '';
            // 车型名称title，也是固定在顶部
            this.$refs['param-top'].style.top = (-scrollTop + offsetTop <= 0 ? 0 : -scrollTop + offsetTop) + 'px';
            this.$refs['car-title'].style.top = (-scrollTop + offsetTop <= 0 ? 0 : -scrollTop + offsetTop) + 'px';
            // 车型名称title，需要和滚动条一并左移
            this.$refs['car-title'].style.left = -scrollLeft + baseLeft + 'px';
            // 顶部banner的定位处理
            if (this.isShowAd) {
                this.$refs['top-banner-box'].style.top = -scrollTop + 102 + 'px';
                this.$refs['top-banner-box'].style.left = baseLeft + 'px';
            }
        },