0

問題のアイテムへのリンクは次のとおりです 。 http://www.nychukdesign.com/uploads/dynamic-top-bar-nav-menu.html

すべての HTML、Javascript、および CSS が 1 つの html ファイルに含まれています

機能の説明: これは単純な動的な水平ナビゲーション バーであり、ユーザーがページを下にスクロールすると消えることを意図しており、ユーザーがその領域にマウスを移動するとトリガーがアクティブになり、その領域が下にスライドして再表示され、もう一度消えます。マウスアウト時。ユーザーがスクロールして一番上に戻ると、ナビゲーションはデフォルト (静的) の状態に戻ります...ここで問題が発生します。

問題の説明: ページのトップに戻ると、ナビゲーションがデフォルトの状態に戻り、マウスがこの領域を離れると (再度下にスクロールせずに)、時々 (そして、毎回この問題を再現することはできません)、ナビゲーションが上にスライドして消えます。最初の試行で発生する場合もあれば、数回試行した後に発生する場合もあり、主に Firefox 2.0 で発生しますが、Safari で 1 回か 2 回発生したことがあります。

私の考え: 私はこれに困惑しており、なぜ私が助けを求めているのか. アドバイスをいただければ幸いです。

問題を再現するには 更新:問題を再現する方法を発見しました。上にスクロールして戻る前に、下にスクロールしてメニューをトリガーする必要があります。メニューにマウスを合わせると、何らかの理由でメニューが消えます。

コード：

<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