Question

以下是相关项目的链接： http://www.nychukdesign.com/uploads/dynamic-top-bar-nav-menu.html

所有HTML，Javascript和CSS都在一个html文件中

功能描述 这是一个简单的动态水平导航栏，用于在用户向下滚动页面时消失，当用户将鼠标移入该区域时，该触发器将被激活，该区域会向下滑动并重新出现，并在被移除时再次消失。当用户滚动回到顶部时，导航将返回到其默认（静态）状态...这就是问题所在的位置。

问题描述： 当你返回到页面顶部时，有时（是的，我无法再次创建此问题），导航返回到默认状态，当鼠标离开此区域时（不再向下滚动）导航将滑动起来消失。有时它会在第一次尝试时发生，有时在几次之后，主要在Firefox 2.0中发生，尽管我在Safari中曾经发生过一次或两次。

我的想法： 我很困惑，为什么我在寻求帮助。任何建议都将不胜感激。

重新创建问题 更新：我刚刚发现了如何重新创建问题。您必须向下滚动并至少触发一次菜单，然后再滚动到顶部，其中鼠标悬停在菜单上会因某种原因而消失。

代码：

<script type="text/javascript">
// Use short notation of DOM ready

$(function(){

// Assign variables for the menu, the trigger and the menu position (relative to the document)
var menu = $('#menu'),
    menuTrigger = $('#menu-trigger'),
    pos = menu.offset();

    // Listen for the scroll event
    $(window).scroll(function(){
        // If we scroll past the position of the menu's height and it has it's default style, then hide menu. 
        if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
            menu.fadeOut('fast', function(){
                  // Remove the default class and replace with fixed class
                  $(this).removeClass('default').addClass('fixed'); 
            });
            // Initiate the trigger to show and hide the menu with the mouse event
                   $(menuTrigger).removeClass('hidden').addClass('block').mouseenter(function(){
                $(menu).slideDown('fast').mouseleave(function(){
                $(menu).slideUp('fast');
                });
                });
        // If we scroll back to top and menu has fixed class, fadeIn menu
        } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
            menu.fadeIn('fast', function(){
                // Hide the trigger
                $(menuTrigger).removeClass('block').addClass('hidden');

                // Give menu default style
                $(this).removeClass('fixed').addClass('default');
            });
        }
    });

});
</script>

鼠标离开事件在导航菜单中继续触发

0 个答案: