原生js和vue实现页面滑动时固定某一元素到底部

chen_sir_sh

已于 2023-04-27 09:24:09 修改

阅读量750

点赞数

分类专栏：工作分享文章标签： javascript vue.js css

于 2023-04-07 17:34:57 首次发布

本文链接：https://blog.csdn.net/m54584mnkj/article/details/130017325

版权

工作分享专栏收录该内容

67 篇文章 2 订阅

订阅专栏

直接上代码,代码内有注释。

原生js实现方法：

<body>
    <div class="flex-top">

    </div>
    <div class="flex">
        <div class="left-content">

        </div>
        <div class="fixed-content">

        </div>
    </div>


</body>

<style>
    .flex-top {
        height: 300px;
        width: 300px;
        background: red;
    }

    .flex {
        display: flex;
    }

    .left-content {
        width: 100px;
        height: 5000px;
        border: solid 1px black;
    }

    .fixed-content {
        width: 300px;
        height: 1200px;
        border: solid 1px gray;
        margin-left: 1px;
    }

    .color {
        position: fixed;
        bottom: 10px;
        left: 110px;
    }
</style>
<script>
    function getElementTop(elem) {
        let elemTop = elem.offsetTop;//获得elem元素距相对定位的父元素的top
        elem = elem.offsetParent;//将elem换成起相对定位的父元素
        while (elem != null) {
            //只要还有相对定位的父元素 
            //获得父元素 距他父元素的top值,累加到结果中
            elemTop += elem.offsetTop;
            elem = elem.offsetParent;
        }
        return elemTop;
    }
    let fixedContent = document.getElementsByClassName('fixed-content')[0];
    let offseTopHeight = getElementTop(fixedContent); //获取元素距离顶部高度
    // fixedContent.offsetHeight  //获取元素高度
    // document.body.scrollTop 网页被卷去的高
    // document.documentElement.clientHeight  屏幕可视高度

    window.onscroll = function () {
        let overHeight = document.documentElement.scrollTop;
        //（元素高度 + 距离顶部高度 - 卷去高度）  < 可视高度
        if ((fixedContent.offsetHeight + offseTopHeight) - overHeight < document.documentElement.clientHeight) {
            fixedContent.classList.add('color')
        } else {
            fixedContent.classList.remove('color')
        }
    }


</script>

Vue实现方法

    //在vue内实现该功能

    <div  state.isFixed ? 'fixed_active' : '']" ref="fixedName">
        </div>
<script>
    import { onMounted } from 'vue';

    const state = {
        fixOffsetHeight:'', //距离顶部的高度
        fixEleHeight:'',  //固定元素的高度
        isFixed:''  //增加class的类名
    }

    onMounted(() => {
        window.addEventListener('scroll', handleScroll);
        state.fixEleHeight = getElementTop(fixedName.value);
    });


    const handleScroll = () => {
        let scrollTop = document.documentElement.scrollTop;
        state.fixOffsetHeight = fixedName.value.offsetHeight == 0 ? state.fixOffsetHeight : fixedName.value.offsetHeight;
        if ((state.fixOffsetHeight + state.fixEleHeight) - scrollTop < document.documentElement.clientHeight) {
            state.isFixed = true;
        } else {
            state.isFixed = false;
        }
    };
//要记得卸载，要不然下次进入该页面会报错
onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});
<script>