Question

我想要实现的基本思路是滚动过去时粘贴在页面顶部的导航菜单。在这个导航中，我想要一个带有onclick事件的单个菜单按钮，可以点击下拉菜单。

我有粘性导航和下拉工作。但是，当我将两者结合在一起时，onclick动画仅在我滚动时才有效。

以下是代码：

<nav id="navigation">
    <div class="row">
        <div class="twelve columns">
            <div id="logo"> </div>

            <ul id="main_nav">
                <li class="menu">   
                    <ul id="dropdown">
                        <li><a href="">HOME     </a></li>
                        <li><a href="">ABOUT    </a></li>
                        <li><a href="">MEDIA    </a></li>
                        <li><a href="">BLOG     </a></li>
                        <li><a href="">STORE    </a></li>
                    </ul><!-- #dropdown -->
                </li><!-- .menu -->
            </ul><!-- #main_nav -->

        </div><!-- .twelve columns -->
    </div><!-- .row -->
</nav><!-- #navigation -->




    // Makes #navigation stick to top when scrolled past //
    function sticky_relocate() {
        var window_top = $(window).scrollTop();
        var div_top = $('#navigation_anchor').offset().top;
        if (window_top > div_top) {
            $('#navigation').addClass('stick');
            $('#wrapper').addClass('push');
        } else {
            $('#navigation').removeClass('stick');
            $('#wrapper').removeClass('push');
        }
    }
    $(function() {
            $(window).scroll(sticky_relocate);
            sticky_relocate();
    });
    // Shows and hides dropdown main_navigation on click //
    $(document).ready(function($) {
        $("#dropdown").hide();
        $(".menu").click(function() {
            $("#dropdown").slideToggle(500);
        });
    });

现在我知道问题出在$(window.scroll(sticky_relocate); 由于下拉列表位于#navigation中，因此动画仅适用于window.scroll。

我的问题是：有没有办法不断激活sticky_relocate函数？不只是在window.scroll上？

动画在Sticky Navigation jQuery中无效

0 个答案: