background-attachment: fixed;
**页面中间的版块,顶部固定导航栏110px,滚动到距离顶部110px该位置时,固定背景图**
```
...
<div class="intro-block" id="fixedBg" :class="{'fixed-bg':bgFixed}">
...
</div>
...
```
```
//页面滚动监听
onMounted(() => {
window.addEventListener('scroll', handleScroll);
})
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll);
})
function handleScroll() {
let element = document.getElementById('fixedBg')
const rect = element.getBoundingClientRect();
if (rect.top < 110 || rect.top == 110) {
bgFixed.value = true
} else {
bgFixed.value = false
}
}
```
```
.fixed-bg {
background-position-y: 110px;
background-attachment: fixed;
}
```