在滚动更改下拉菜单下拉位置

Question

这可以通过仅修改<ui> <li>自定义下拉菜单的类来实现吗？ 只修改top, left, right, bottom部分而不是其他内容？或者在那里 一些特殊的魔法，如果有人知道教程请与我分享。我一直无法做到 在互联网上找到一些，非常感谢。

截图：

HTML：

<div class="container">
<ul class="menu openDown">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
</ul>  

这是一个小提琴：

http://jsfiddle.net/heM4v/11/

编辑：必须在滚动时修改，检测用户是向下滚动还是向上滚动，并根据滚动量，将菜单类修改为向上或向下。谢谢！

编辑：这篇文章不重复，因为链接（Drop-down menu that opens up/upward with pure css）与此非常不同，我希望菜单下拉方向取决于上下滚动的数量。 user，表示确定滚动位置并修改类以向上/向下放置菜单。在Stackoverflow链接中，这是没有实现的，它是纯粹的基于CSS的悬停，这意味着你将以“.no-js”形式使用它。

编辑：两个片段，不确定这是否可以帮助您解决问题。

var menuHeight = $(this).parent().find('.menu').innerHeight();

$(window).scroll(function () {
            var fromTop = $(this).scrollTop() + menuHeight;
            console.log(fromTop); 
        }); 

编辑：赏金仍然是开放的，如果有人知道任何教程或如何实现这一点，分享你的答案，你将获得50点声望点。

Answer 1

编辑2（见注释）

在与OP讨论之后，这就是所需要的：

1. 创建一个反转下拉列表的类
2. 打开下拉列表时，在窗口中计算内部列表的位置
3. 取决于该位置（是浏览器窗口中间上方或下方的按钮），应用反转类。

CSS

[这是为引导程序，编辑类以满足您的需要]

.reverse {
    top:auto;
    bottom:100%;
}

JS

$(".dropdown-toggle").click(function(){
    // get the scollTop (distance scrolled from top)
    var scrollTop = $(window).scrollTop();
    // get the top offset of the dropdown (distance from top of the page)
    var topOffset = $(".dropdown").offset().top;
    // calculate the dropdown offset relative to window position
    var relativeOffset = topOffset-scrollTop;
    // get the window height
    var windowHeight = $(window).height();

    // if the relative offset is greater than half the window height,
    // reverse the dropdown.
    if(relativeOffset > windowHeight/2){
        $(".dropdown-menu").addClass("reverse");
    }
    else{
        $(".dropdown-menu").removeClass("reverse");
    }
});

同样如此，这将在引导下拉列表中起作用，因此如果要使用其他框架，则需要更新选择器。

我们的想法是计算元素的top偏移量与当前scrollTop之间的差异，然后将reverse类添加到内部ul，具体取决于该值与页面中间的比较。

Fiddle

编辑1（见评论）

根据要求，这是我如何调整一些事情。

N.B。这使用了Twitter Bootstrap，既可以用于样式和标记，也可以用于javascript，但它绝不是必需的，可以在没有太多麻烦的情况下重新创建。

HTML

根据要求，我在下拉列表中添加了两个reverse-toggle个元素（一个在开头，另一个在结尾）。

<li role="presentation" class="reverse-toggle top-reverse hidden"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Reverse towards top</a></li>

这里重要的部分是reverse-toggle top-reverse类。其余的是Bootstrap标记。

将javascript:void(0)添加到a元素也很重要，如果未添加，则单击按钮时下拉列表将会关闭。

CSS

如前所述，这里唯一重要的规则是.reverse类给出的规则。 此类将应用于包含下拉列表的ul，并负责反转状态。

.reverse {
    top: auto;
    bottom:100%;
}

JS

$(window).scroll(function () {
    // if the dropdown is "high enough" on the page, show the toggle commands
    if(($(window).scrollTop() + $(window).height() > $(document).height() - 256)){
        if($(".dropdown-menu").hasClass("reverse")){
            // if the dropdown is already reversed
            $(".bottom-reverse").removeClass("hidden");
            $(".top-reverse").addClass("hidden");
        }
        else{
            $(".top-reverse").removeClass("hidden");
            $(".bottom-reverse").addClass("hidden");
        }
    }
    else{
        $(".top-reverse").addClass("hidden");
        $(".bottom-reverse").addClass("hidden");
    }
});

$(".reverse-toggle").click(function(){
    $(".dropdown-menu").toggleClass("reverse").dropdown("toggle");
    $(".top-reverse").toggleClass("hidden");
    $(".bottom-reverse").toggleClass("hidden");
});

JS在这里做了以下两件事：

1. 如果页面已滚动，具体取决于页面位置（第一个if）和下拉列表的状态（第二个if，或reverse），正确的按钮是显示在下拉列表中。
2. 如果点击其中一个reverse-toggle按钮，则下拉列表ul会更改状态。

小提琴

Here

原始答案

我的解决方案以下列方式运作：

1. 创建一个reverse类，指定下拉列表位置（在twitter引导程序中，该类仅包含top:auto;和bottom:100%）
2. 根据scrollTop()值添加该类或将其删除。

假设您找到要添加的正确类，可以很容易地将其移植到其他框架。

请参阅fiddle。