Javascript 如果在滚动页面时调整窗口大小，如何使此效果生效

我有一种效果，当指定的div点击屏幕顶部时，标题变得不固定，并与其余内容一起滚动

这非常有效，我在一个调整大小事件侦听器中包装了“const targettOppost=targetEl.getBoundingClientRect（）.top”。但是如果页面已经被滚动，那么它的计算是错误的，我不知道为什么

另一个问题是，如果页面向下滚动刷新，则标题将一直存在，直到您滚动为止

代码如下：

window.onresize=函数（事件）{
const targettAntops=targetEl.getBoundingClientRect（）.top；
console.log（targett）；
};
const headerell=document.querySelector（'header'））
const targetEl=document.querySelector（“#target”）
const targettAntops=targetEl.getBoundingClientRect（）.top
设为“已修复”=真
document.onscroll=（）=>{
const targetTopOffset=targetEl.getBoundingClientRect（）.top
如果（isHeaderFixed&&targetTopOffset<100）{
headerell.style.position='绝对'
headerEl.style.top=`${targetTrops-100}px`
isHeaderFixed=！isHeaderFixed
}
如果（！isHeaderFixed&&targetTopOffset>=100）{
headerell.style.position='fixed'
headerEl.style.top='0px'
isHeaderFixed=！isHeaderFixed
}
}

正文{
填充：0；
保证金：0；
位置：相对位置；
}
标题{
位置：固定；
高度：100px；
宽度：100%；
背景：浅蓝色；
}
.内容{
线高：100px；
}
.目标{
宽度：100%；
背景：红色；
}

自定义标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。阿利夸姆·苏西皮特·泰勒斯·乌尔纳（Aliquam suscipit tellus urna）是一只猫科动物。麦格纳马蒂斯大酒店的Phasellus maximus。佩伦茨克的临时，乌娜·维塔·康格·佩伦茨克，莫里斯·福西布斯·努拉，维塔·莫莱斯蒂·利奥·珀鲁斯·利奥。这是一个温和的马萨。Morbi ornare tincidunt ipsum，et accumsan erat fringilla a。埃格斯塔斯、尼布维尔调味品、米加斯麦格纳、欧盟乌拉姆科珀玉米饼、米加斯麦格纳麦格纳玉米饼。Morbi euismod lacus a ligula rutrum，以布朗迪特为例。不，这是一个很好的选择。这是一种巨大的绿色芸香。无主与无主。塞德·艾米特·莫里斯坐在马格纳·廷西德蒙特·康塞奎特酒店。Proin mattis坐在一个孕妇旁边。在精英阶层的支持下，不允许任何暂时性的改变。这是一个非常简单的例子。
目标
Lorem ipsum dolor sit amet，是一位杰出的献身者。阿利夸姆·苏西皮特·泰勒斯·乌尔纳（Aliquam suscipit tellus urna）是一只猫科动物。麦格纳马蒂斯大酒店的Phasellus maximus。佩伦茨克的临时，乌娜·维塔·康格·佩伦茨克，莫里斯·福西布斯·努拉，维塔·莫莱斯蒂·利奥·珀鲁斯·利奥。这是一个温和的马萨。Morbi ornare tincidunt ipsum，et accumsan erat fringilla a。埃格斯塔斯、尼布维尔调味品、米加斯麦格纳、欧盟乌拉姆科珀玉米饼、米加斯麦格纳麦格纳玉米饼。Morbi euismod lacus a ligula rutrum，以布朗迪特为例。不，这是一个很好的选择。这是一种巨大的绿色芸香。无主与无主。塞德·艾米特·莫里斯坐在马格纳·廷西德蒙特·康塞奎特酒店。Proin mattis坐在一个孕妇旁边。在精英阶层的支持下，不允许任何暂时性的改变。这是一个非常简单的例子。

这是因为您在

onresize

事件中将

targetAttops

重新定义为常量。 您只需将新值指定给

targetAttops

请参阅下面的代码

window.onresize=函数（事件）{
targetControls=targetEl.getBoundingClientRect（）.top；
console.log（targett）；
};
const headerell=document.querySelector（'header'））
const targetEl=document.querySelector（“#target”）
设targetAttops=targetEl.getBoundingClientRect（）.top
设为“已修复”=真
document.onscroll=（）=>{
const targetTopOffset=targetEl.getBoundingClientRect（）.top
如果（isHeaderFixed&&targetTopOffset<100）{
headerell.style.position='绝对'
headerEl.style.top=`${targetTrops-100}px`
isHeaderFixed=！isHeaderFixed
}
如果（！isHeaderFixed&&targetTopOffset>=100）{
headerell.style.position='fixed'
headerEl.style.top='0px'
isHeaderFixed=！isHeaderFixed
}
}

正文{
填充：0；
保证金：0；
位置：相对位置；
}
标题{
位置：固定；
高度：100px；
宽度：100%；
背景：浅蓝色；
}
.内容{
线高：100px；
}
.目标{
宽度：100%；
背景：红色；
}

自定义标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。阿利夸姆·苏西皮特·泰勒斯·乌尔纳（Aliquam suscipit tellus urna）是一只猫科动物。麦格纳马蒂斯大酒店的Phasellus maximus。佩伦茨克的临时，乌娜·维塔·康格·佩伦茨克，莫里斯·福西布斯·努拉，维塔·莫莱斯蒂·利奥·珀鲁斯·利奥。这是一个温和的马萨。Morbi ornare tincidunt ipsum，et accumsan erat fringilla a。埃格斯塔斯、尼布维尔调味品、米加斯麦格纳、欧盟乌拉姆科珀玉米饼、米加斯麦格纳麦格纳玉米饼。Morbi euismod lacus a ligula rutrum，以布朗迪特为例。不，这是一个很好的选择。这是一种巨大的绿色芸香。无主与无主。塞德·艾米特·莫里斯坐在马格纳·廷西德蒙特·康塞奎特酒店。Proin mattis坐在一个孕妇旁边。在精英阶层的支持下，不允许任何暂时性的改变。这是一个非常简单的例子。
目标
Lorem ipsum dolor sit amet，是一位杰出的献身者。阿利夸姆·苏西皮特·泰勒斯·乌尔纳（Aliquam suscipit tellus urna）是一只猫科动物。麦格纳马蒂斯大酒店的Phasellus maximus。佩伦茨克的临时，乌娜·维塔·康格·佩伦茨克，莫里斯·福西布斯·努拉，维塔·莫莱斯蒂·利奥·珀鲁斯·利奥。这是一个温和的马萨。Morbi ornare tincidunt ipsum，et accumsan erat fringilla a。米饭调味品