當另一個div在視口中時，更改固定div中顯示的圖像

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速度。 在此示例中，我沒有對事件進行防抖操作，因此您可以更好地了解何時更改了背景。

 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); 

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

 <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>