如果在视口中不可见，则使用JQuery更改div元素的位置

Question

我在屏幕/浏览器的左侧有一个垂直菜单及其相应的子菜单项。我被困在一个地方。

要求是：
鼠标悬停在元素上，如果子菜单在视口内可见（即可见和可访问的窗口区域），则不执行任何操作;但是，如果它超出可见区域，那么子菜单应该填充到窗口的顶部。

这意味着子菜单应该在视口中可见（如果它隐藏在下方，它应该向上打开）
感谢

Answer 1

试一试：

http://www.appelsiini.net/projects/viewport

这是一个非常简单的jQuery插件，用于编写逻辑以了解元素何时进入视口，以及许多其他基于条件逻辑视口的调用。

加载完所有内容后，您需要做的就是：

$(window).scroll (function(){

if  ($('.menu') .is(":in-viewport")){

 // Do literally anything you want with jQuery   
}

});

非常强大的插件。

Answer 2

    $(".mainNav > li").hover(
        function(){
            var winHt = $(window).height(); 
            var scrHt = $(document).height();

            var viewport = {};
            viewport.top = $(window).scrollTop();
            viewport.bottom = viewport.top + $(window).height();

            var bounds = {};
            bounds.top = $(".sub_menu",this).offset().top;
            bounds.bottom = bounds.top + $(".sub_menu",this).outerHeight();

            if(viewport.bottom < bounds.bottom){ 
                var ScrTop = parseInt(bounds.bottom-viewport.bottom);
                $(".sub_menu",this).css("marginTop","-"+ScrTop+"px");
            }else{}
        },
        function(){
            $(".sub_menu",this).css("marginTop","0px");
    });