在“滚动更改"下拉菜单上的放置位置 [英] On Scroll change dropdown menu drop position

问题描述

能否仅通过修改<ui> <li>自定义下拉菜单的类来实现? 通过仅修改top, left, right, bottom部分，仅此而已?还是在那里 一些特殊的魔术，如果有人知道教程，请与我分享.我一直无法 在互联网上找到一些，非常感谢.

Can this be achieved by only modifying the class of the <ui> <li> custom dropdown menu? By just modifying the top, left, right, bottom part and nothing else? Or is there some special magic, if anyone knows a tutorial please share with me. I've been unable to find some on the Internet, thanks a lot.

屏幕截图:

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/

必须在滚动时进行修改，以检测用户是向下滚动还是向上滚动，并根据滚动量将菜单的类修改为向上或向下.谢谢！

由于链接(

This post is NOT duplicate since the link (Drop-down menu that opens up/upward with pure css), is very different from this one, I want the menu drop direction to depend on the amount of scroll either up/down by the user, meaning determine scroll position and modify the class to either drop the menu up/down. In the Stackoverflow link give this isn't achieved and it's pure CSS hover based, meaning you'd use it in ".no-js" form.

两个摘要，不确定是否可以帮助您弄清楚.

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

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

赏金仍然开放，如果有人知道任何教程或如何实现此目的，请分享您的答案，您将获得50分的声​​誉积分.

推荐答案

编辑2(请参见评论)

与OP讨论后，需要的是以下内容:

Edit 2 (see comments)

After discussing with the OP, here's what was wanted:

1. 创建一个可反转下拉菜单的类
2. 打开下拉菜单时，计算内部列表在窗口中的位置
3. 根据该位置(浏览器窗口中间上方还是下方的按钮)，应用反转的类.

CSS

[这是用于引导程序的，请根据您的需要编辑类]

CSS

[This is made for bootstrap, edit the class to match your needs]

.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");
    }
});

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

Same goes for this, this will work on a bootstrap dropdown, so you'll need to update the selectors if you want to use another framework.

想法是计算元素的top偏移量与当前scrollTop之间的差，然后根据该值与中间值之间的比较将reverse类添加到内部ul中页面.

The idea is to calculate the difference between the top offset of the element and the current scrollTop, then add the reverse class to the inner ul depending on the comparison between that value and the middle of the page.

根据要求，这是我对内容进行一些微调的方式.

As per requested, here's how I tweaked things around a bit.

N.B..它使用Twitter Bootstrap(用于样式和标记以及javascript)，但这绝不是必需的，并且可以轻松创建.

N.B. This uses Twitter Bootstrap, both for styling and markup and for javascript, but it is by no means necessary and can be recreated without too much hassle.

根据要求，我在下拉菜单中添加了两个reverse-toggle元素(一个在开头，另一个在结尾).

As asked, I added two reverse-toggle elements to the dropdown, (one at the beginning, the other at the end).

<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标记.

The important part here is the reverse-toggle top-reverse classes. The rest is Bootstrap markup.

将javascript:void(0)添加到a元素也很重要，如果未添加该元素，则在单击按钮时将关闭下拉菜单.

It is also important to add the javascript:void(0) to the a element, if this isn't added the dropdown will close when the buttons are clicked.

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

As stated earlier, the only important rules here are those given by the .reverse class. This class will be applied to the ul containing the dropdown and is responsible for the reversed state.

.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执行以下两项操作:

The JS here does the two following things:

1. 如果滚动页面，则取决于页面位置(第一个if)和下拉菜单的状态(第二个if，是否为reverse)，下拉菜单中会显示正确的按钮./li>
2. 如果单击reverse-toggle按钮之一，则下拉菜单ul会更改状态.

1. If the page is scrolled, depending on the page position (first if) and the state of the dropdown (second if, either reverse or not), the correct button is shown in the dropdown.
2. If one of the reverse-toggle buttons is clicked, the dropdown ul changes states.

提琴

此处

我的解决方案通过以下方式工作:

My solution works the following way:

1. 创建一个指定下拉位置的reverse类(在twitter引导程序中，该类仅包含top:auto;和bottom:100%)
2. 添加该类或将其删除，具体取决于scrollTop()值.

1. Create a reverse class that specifies the dropdown location (in twitter bootstrap, that class contains only top:auto; and bottom:100%)
2. Add that class or remove it depending on the scrollTop() value.

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

It can pretty easily be ported to other frameworks assuming you find the correct class to add.

请参见 小提琴 .

这篇关于在“滚动更改"下拉菜单上的放置位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！