0

这是相关项目的链接： 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>
4

0 回答 0