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

Question

我正在使用导航下拉菜单，它具有多个下拉菜单选项。 所以我想添加一个类move-left如果它超出视口边缘。

我已经尝试过getBoundingClientRect(); 但是它给了我以下错误：

未捕获的TypeError：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')
     }
})

Answer 1

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

因此，您需要更改此行：

var el = $('ul.nav-menu li ul 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];