将div位置更改为fixed with javascript会将div附加到文档而不是视口

我正在寻找一种方法来确定div的任何部分是否接触到视口的顶部，并使用普通javascript将该div中的一个项目固定到视口的顶部

我已经能够确定如何确定div是否接触视口顶部，并触发对div样式的更改。但由于某种原因，当我将div的

位置：绝对

更改为

位置：固定

时，div固定在文档顶部，而不是视口顶部，因此不可见

我的js

---

进一步澄清：我需要解决的问题是，当javascript将style.position更改为fixed时，#seemore div的位置将从文档顶部而不是从视口顶部测量“top”值。因此基本上在视口中不可见。

如果我理解正确，我认为您的问题在于：

if ((y < 0) && (h > 0))

if（（y<0）和&（h>0））

当container div到达文档顶部时，“seemore”的位置设置为fixed，但与div底部到达文档顶部的速度一样快， “h==0”且位置再次设置为绝对

试试这个

const seeMore = document.getElementById('seemore');
const div = document.getElementById('itin');

window.addEventListener('scroll', checkBoundries);

function checkBoundries() {
    var rect = div.getBoundingClientRect();
    var y = rect.top;
    var h = rect.bottom;
    if (y < 0) {
        seeMore.style.position = 'fixed';
        seeMore.style.top = '45%';
    } else {
        seeMore.style.position = 'absolute';
        seeMore.style.top = '66px';
    }
}

const seeMore=document.getElementById（'seeMore'）；
const div=document.getElementById（'itin'）；
window.addEventListener（'scroll'，checkBoundries）；
函数checkBoundries（）{
var rect=div.getBoundingClientRect（）；
var y=rect.top；
var h=矩形底部；
if（y<0）{
seeMore.style.position='fixed'；
seeMore.style.top='45%'；
}否则{
seeMore.style.position='absolute'；
seeMore.style.top='66px'；
}
}

与应用于某个…的父级的父级的筛选器相关

发现了一些关于转换和位置问题的老问题：修复了大约5到7年前的问题。尽管许多人提到向浏览器制造商提交问题报告，但问题似乎从未得到解决。一条评论提到过滤器也可能导致问题

---

将筛选器移动到一个单独的类中，该类现在可以添加和删除，而不是将筛选器直接应用到div。所有操作都按预期进行。

实际上，我希望div在滚动出视图后恢复为绝对值。但我真正的问题是固定div最终附加到文档而不是视口。@Tom，这很奇怪。对我来说，当我滚动时，它保持在距离视口顶部45%的位置。不确定它是否会影响某些内容，但整个文档相当长，#itin div只是一小部分。

#seemore {
  width: auto;
  position: absolute;
  top: 66px;
  right: 20px;
}

if ((y < 0) && (h > 0))

const seeMore = document.getElementById('seemore');
const div = document.getElementById('itin');

window.addEventListener('scroll', checkBoundries);

function checkBoundries() {
    var rect = div.getBoundingClientRect();
    var y = rect.top;
    var h = rect.bottom;
    if (y < 0) {
        seeMore.style.position = 'fixed';
        seeMore.style.top = '45%';
    } else {
        seeMore.style.position = 'absolute';
        seeMore.style.top = '66px';
    }
}