Question

我有一个固定的div，其中包含一个与用户从页面顶部滚动的图像。当新内容div进入视口时，我希望图像发生变化。

我发现了一段相关的代码，它会根据用户滚动像素的距离来更改图像。这是有效的，但仅当视口是特定大小时，否则图像变化太早/晚：

我正在尝试修改它，以便更改是基于何时进入视图的另一个div，以便无论屏幕大小（内容div高度是用相对单位设置）都可以。我认为如果其他div位置保存到变量然后用于代替上面代码中的像素值，则可以这样做。但是我似乎无法做到这一点，可能是因为我没有正确计算其他div位置。

$("#display1").fadeIn(1000);
$(window).scroll(function() {
  var pos = $(window).scrollTop();
  var first = $("#first").offset();
  var second = $("#second").offset();
  if (pos < first) {
    hideAll("display1");
    $("#display1").fadeIn(1000);
  }
  if (pos > first && pos < second) {
    hideAll("display2");
    $("#display2").fadeIn(1000);
  }
  etc...
});

function hideAll(exceptMe) {
  $(".displayImg").each(function(i) {
    if ($(this).attr("id") == exceptMe) return;
    $(this).fadeOut();
  });
}

Answer 1

你应该试试

getBoundingClientRect（）

JS方法，因为它获取元素相对于视口的位置。请检查此答案：https://stackoverflow.com/a/7557433/4312515

Answer 2

以下是基于进入视图的元素更改背景图像的概念的快速证明。

有三个div。当第三个div到达视口的底部时，它将改变背景的颜色。当第三个div再次滚出视图时，背景颜色将重置为其初始颜色。

通常你应该去抖动滚动事件以防止减慢UI。在这个例子中，我没有对事件进行去抖动，因此您可以更好地了解背景何时发生变化。

＆＃13;

const
  card3 = document.getElementById('card3'),
  background = document.getElementById('background');
  
let
  isCardVisible = false;
  
function checkDivPosition() {
  const
    cardTopPosition = card3.getBoundingClientRect().top,
    viewportHeight = document.documentElement.clientHeight,
    isInView = cardTopPosition - viewportHeight < 0;
    
  if (isInView && !isCardVisible) {
    background.style.backgroundColor = 'rebeccapurple';
    isCardVisible = true;
  } else if (!isInView && isCardVisible) {
    background.style.backgroundColor = 'orange';
    isCardVisible = false;
  }
}


function onWindowScroll(event) {
  checkDivPosition();
}
  
window.addEventListener('scroll', onWindowScroll);

＆＃13;

body {
  margin: 0;
}

.background {
  height: 100vh;
  opacity: .2;
  position: fixed;
  transition: background-color .3s ease-out;
  width: 100vw;
}

.card {
  border: 1px solid;
  height: 100vh;
  width: 100vw;
}
.card + .card {
  margin-top: 5vh;
}

＆＃13;

<div id="background" class="background" style="background-color:orange"></div>

<div class="card">
  Card 1
</div>
<div class="card">
  Card 2
</div>
<div id="card3" class="card"> 
  Card 3.
</div>

＆＃13;

当另一个div在视口中时更改固定div中显示的图像

2 个答案: