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

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

我已经能够解决如何确定div是否接触到视口的顶部并触发对div样式的更改。但由于某种原因当我换了房间 position: absolute 到 position: fixed div固定在文档的顶部,而不是视口的顶部,因此不可见。

我的js

function touchTop() {
  var div = $('itin');
  var rect = div.getBoundingClientRect();
  var y = rect.top;
  var h = rect.bottom;
  if ((y < 0) && (h > 0)) {
    document.getElementById('seemore').style.position = 'fixed';
    document.getElementById('seemore').style.top = '45%';
  } else {
    document.getElementById('seemore').style.position = 'absolute';
    document.getElementById('seemore').style.top = '66px';
  }
}

window.addEventListener('scroll', touchTop);

<div id="itin" class="container">
  <div class="sp20"></div>
  <div class="text rgt">
    <h3>your daily adventures</h3>
    <p>blah blah blah</p>
  </div>
  <div id="seemore" class="ghstbtn">See More</div>
</div>

以及基本的初始CSS

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

我需要解决的问题是,当javascript将style.position更改为fixed时,#seemore div的位置会使“top”值从文档顶部而不是从视口顶部测量。所以基本上在视口中不可见。