Question

我正在使用“Suckerfish之子”创建一个下拉列表（好吧，实际上它弹出右侧）导航菜单。

有些子菜单很长，并且低于首屏。有没有办法（使用JavaScript / jQuery）来确保菜单始终在首页（我很高兴，如果那些太大而不适合视口只是顶部）？

Answer 1

最后，我找不到答案，所以我自己做了一个解决方案。

以下是我使用的代码（需要jQuery）：

var winHeight = $(window).height();
$navULs = $('#nav ul');
$navULs.find('ul').each(function(i,v) {
    $this = $(v);
    var ulHeight = $this.height();
    var parentHeight = $this.closest('li').height();
    var parentTop = $this.offset().top;
    var parentBottom = parentTop + parentHeight;
    if ((winHeight - parentTop) &lt; ulHeight) {
        if (parentBottom &lt; ulHeight) {
            $this.css({
                'margin-top': '0px',  // remove margin-top (added by suckerfish css) as it screws up the calculations
                'top': '-' + (parentTop) + 'px'  // move the menu up by the amount of px available above the parent's top
            });
        } else {
            $this.css('bottom', '0px');  // v basic, if sub menu will drop too much shove it up (css does the heavy lifting here)
        }
    }
});

我试图在此blog post中解释它。

JS / JQ修复Suckerfish的儿子延伸到折叠以下？

1 个答案: