如果元素不在视口中，则将其添加到元素中

Question

I am working with a navigation dropdown and it has several dropdowns options. So I want to add a class move-left if it goes out of the viewport edge.

I have tried getBoundingClientRect(); but it gives me following error :

Uncaught TypeError: el.getBoundingClientRect is not a function

My browser is chrome latest version.

My code is:

var isElemInViewport = function(el){
    var rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&     
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

var el = $('ul.nav-menu li ul li ul');
$('ul.nav-menu li ul li').hover(function(){
    if(!isElemInViewport(el)){
        alert('o ya')
    }
}, function(){
     if(!isElemInViewport(el)){
        alert('no more')
     }
})

Answer 1

You are trying to access a method that belongs to native DOM elements, through a jQuery object.

So, you need to change this line:

var el = $('ul.nav-menu li ul li ul');

To this:

// The jQuery object, at property '0', contains the native DOM element
// you want. If you were to get multiple matches for your selector,
// they'll be numbered in order: 
// $('selector')[0], $('selector')[1], $('selector')[2], ...

var el = $('ul.nav-menu li ul li ul')[0];