vue3 实现div滚动到一定位置就固定他，实现一侧滚动到某个位置就固定，实现滚动条滚动到一边的最底部就固定

在vue2以及普通页面里边使用参考：https://www.tnblog.net/aojiancc2/article/details/1273

本来在vue中最好不要去用jquery的，可以直接去监听滚动条的事件来实现的，这会比较忙就直接用一下jquery了。

<script setup lang="ts" name="labroomindex">
    import { reactive, onMounted, nextTick, toRefs, ref } from 'vue'
    import $ from 'jquery'
    onMounted(() => {
        // 固定右边这块位置
        fixedRight()
    })
    const fixedRight = () => {
        $(window).scroll(function () {
            // 获取滚动条的高度
            var scrollTop = $(window).scrollTop()
            // 获取一个屏幕的高度
            var windowHeight = findHeight()
            // console.log('div本身的高度:' + $('#rightdiv').height())
            // console.log('距离顶部的的位置' + scrollTop)
            /*
                有时候某些临界值可能会存在没有机会变回来了,应该还要设置一个一定能变回来的点，
                可以判断是否已经滚动到顶部了，如果已经滚动到顶部了肯定要变回的撒。
                这里写成scrollTop===0也可以，之所以写成scrollTop<10只是为了加一点判断范围而已，这个可以自己控制。
                还要注意一点这个判断要放到是否滚动到底部那个判断前面去，因为之所以写这个判断就是怕下面那个判断滚动条
                是否在底的在某些情况下恒成立了，这样固定的那一块就变不回去了，所以要在那个判断前面先判断，这样优先级就
                会更高一点。
            */
            if (scrollTop < 10) {
                // alert("滚动到顶部了")
                $('#rightdiv').css('position', 'static') // 恢复div可以跟随滚动条滚动
            }
            // 当滚动条滚动到一边的最底部，把需要的div滚动到底部就固定div不让移动了
            else if (scrollTop > $('#rightdiv').height() - windowHeight) {
                $('#rightdiv').css('position', 'fixed') // 固定div让其不随着滚动条的滚动而滚动
                // 这里根据情况设置固定的位置，一般都是设置距离底部一点间距就行了，但是有些时候需要固定的这块内容并不多，占不满一个屏幕，设置距离顶部一点间距也行，比如我这里
                $('#rightdiv').css('top', '10px')
                // $('#rightdiv').css('bottom', '10px')
                // 右边宽度默认是250就设置一个，不然设置为fiexd后会影响宽度，这里根据实际情况来调整吧，因为我这里右边这块的宽度是固定的所以直接给一个宽度就行了，很方便
                $('#rightdiv').css('width', '250px')
            } else {
                $('#rightdiv').css('position', 'static') // 恢复div可以跟随滚动条滚动
            }
        })
    }
    const findHeight = () => {
        var winHeight = 0
        // 获取窗口高度
        if (window.innerHeight) {
            winHeight = window.innerHeight
        } else if (document.body && document.body.clientHeight) {
            winHeight = document.body.clientHeight
        }
        return winHeight
    }
</script>