vue3 实现div滚动到一定位置就固定他，实现一侧滚动到某个位置就固定，实现滚动条滚动到一边的最底部就固定 电脑版发表于：2024/12/9 11:32 tn2> 在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> ```
