Good afternoon, the task is to write a script: when the A (box) element reaches the position of the B element (curtain), a certain class will be added to the B element. The code itself:

$(window).scroll(function(){ // Координаты Box var box = document.querySelector('.box'); var coordBox = box.getBoundingClientRect(); // Координаты Curtain var curtain = document.querySelector('#curtain--panel'); var coorCurt = curtain.getBoundingClientRect(); if(coordBox == coorCurt){ document.querySelector('#curtain--panel .curtain--panel__left').classList.add('go_left_curtain'); document.querySelector('#curtain--panel .curtain--panel__right').classList.add('go_right_curtain'); }else { document.querySelector('#curtain--panel .curtain--panel__left').classList.remove('go_left_curtain'); document.querySelector('#curtain--panel .curtain--panel__right').classList.remove('go_right_curtain'); } });

I tried different ways, in any. The console does not give an error. Tell me what's the problem? The .box element has a fixed position.

    1 answer 1

    Try to take the position.top each element and compare.

     var box = document.getElementById('box').getBoundingClientRect(); top1 = box.top; var curtain = document.getElementById('curtain--panel').getBoundingClientRect(); top2 = curtain.top; if(top1 == top2 ){ }else { }