感谢您的进一步说明。这个问题是由于在将固定div设置为`position: fixed`后,它不再占据文档流,因此会导致页面滚动位置回到顶部的现象。
为了解决这个问题,我们可以在固定div变为`position: fixed`时,记录下它原来的高度,并将其设置为一个占位元素,以保持页面布局不变。然后在取消固定div时,将占位元素移除,并将固定div恢复到原来的高度。
以下是修改后的JavaScript代码示例:
```javascript
// 获取页面上的元素
const fixedDiv = document.querySelector('.fixed');
const contentDiv = document.querySelector('.content');
// 定义变量记录固定div是否已经被固定在页面顶部
let isFixed = false;
// 定义变量记录固定div原来的高度
let fixedDivHeight = 0;
// 监听页面滚动事件
window.addEventListener('scroll', () => {
// 获取当前滚动位置
const scrollPosition = window.scrollY;
// 如果滚动位置超过了内容区域顶部,并且固定div还没有被固定在页面顶部,则将固定div固定在页面顶部
if (scrollPosition >= content