別のdivがビューポートにあるときに固定divに表示される画像を変更する

Question

私は、ページの上からユーザーと共にスクロールする画像を含む固定divがあります。新しいコンテンツ部門がビューポートに入ると、イメージが変わります。

ユーザーがピクセル単位でスクロールする距離に基づいてイメージを変更する関連するコードが見つかりました。これは動作しますが、ビューポートは、特定のサイズがある場合にのみ、それ以外の画像は早すぎる/遅変更：

私は変更はなく、別のdivが来たときに基づいているように、これを変更しようとしている

Example

画面のサイズに関係なく機能するように表示されます（コンテンツ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

ここでは、要素が表示されていることに基づいて背景イメージを変更するという概念の素早い証明があります。

3つのdivがあります。 3番目のdivがビューポートの下部に達すると、背景の色が変更されます。 3番目の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>