Javascript 在元素超出视口时向其添加类

我正在使用导航下拉菜单，它有几个下拉菜单选项。因此，我想添加一个类

向左移动
，如果它离开视口边缘

我尝试了
getBoundingClientRect（）但它给了我以下错误：

未捕获类型错误：el.getBoundingClientRect不是函数

我的浏览器是
chrome
最新版本

我的代码是：

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')
     }
})

var isElemInViewport=函数（el）{
var rect=el.getBoundingClientRect（）；
返回(
rect.top>=0&&
rect.left>=0&&
您正试图通过jQuery对象访问属于本机DOM元素的方法

因此，您需要更改此行：

var el=$（'ul.nav-menu li-ul'）；

为此：

// 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];

您正试图通过jQuery对象访问属于本机DOM元素的方法

因此，您需要更改此行：

var el=$（'ul.nav-menu li-ul'）；

为此：

// 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];

尝试
if（！isElemInViewport（this））
无需再次包装jQuery元素。我想建议相反：-）。尝试
var el=$（'ul.nav-menu-li-ul-li-ul'）[0]；
getBoundingClientRect
是一个DOM函数，
el
在代码中获取jQuery集合。尝试
if（！isElemInViewport（this））
无需再次包装jQuery元素。我想提出相反的建议：-）。请尝试
var el=$（'ul.nav-menu li-ul'）[0]；
getBoundingClientRect
是一个DOM函数，
el
在代码中获取jQuery集合。