代码之家 › 专栏 › 技术社区 › Tom

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

css html javascript

Tom · 技术社区 · 4 年前

我正在寻找一种方法来确定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”值从文档顶部而不是从视口顶部测量。所以基本上在视口中不可见。

0 回复 | 直到 4 年前

Pontus Sandberg 4 年前

如果我理解正确的话,我认为你的问题在于:

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

当容器div到达文档顶部时,position to“seemore”设置为fixed,但只要div底部到达文档顶部,

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';
    }
}