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

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/

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

编辑：这篇文章不是重复的，因为链接（使用纯 css 向上/向上打开的下拉菜单）与这个非常不同，我希望菜单下拉方向取决于向上/向下滚动的数量用户，意思是确定滚动位置并修改类以向上/向下下拉菜单。在 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。

小提琴

编辑 1（见评论）

根据要求，这是我稍微调整一下的方法。

注意这使用 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更改状态。

小提琴

这里

原答案

我的解决方案的工作方式如下：

1. 创建一个reverse指定下拉位置的类（在 twitter bootstrap 中，该类只包含top:auto;和bottom:100%）
2. 根据scrollTop()值添加或删除该类。

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

见小提琴。