如果元素不在视口，则向其添加类

Question

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

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

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