Positioning of elements (spring)



  • Good afternoon, the challenge is to write a violin: when element A(box) reaches the point of element B(curtain), a certain class of element B will be added. 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've been in different ways, no way. There's no mistake in the console. What's the problem?
    Element .box has a fixed position.



  • Try it. 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 {

    }


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2