0

私はjQueryに比較的慣れていないので、このmouseenter/mouseleaveの問題で立ち往生しているようです。ページが一番上にないときに「非表示」になるメニューを設定したいのですが、これは正常に機能しているようです。非表示の場合は、ユーザーがページにカーソルを合わせるとクラスが切り替わり、メニューが表示されます。戻ってきます。ただし、上にスクロールして戻るときにこれは必要ありません。ページが最初に読み込まれ（FirefoxとChromeで）、まだスクロールしていないときは正常に機能しますが、下にスクロールして一番上に戻った後、メニューはマウスリーブで非表示になります。

これが私の現在のコード設定のjsFiddleです。

私はしばらくの間これを解決しようとしてきました、そして他のいくつかの方法を試しました。

このようにホバーを使ってみました

$("#access").hover(function() {
            $(this).removeClass("scroll").addClass("normal");
        }, function() {
            $(this).removeClass("normal").addClass("scroll");
        });

しかし、それは私が今持っているコードと同じことをしました。

私が試した他の方法のいくつかは、b変数を別の関数に渡し、別のdivを作成し、その位置を追跡して、mouseenter / mouseleaveを使用するかどうかを判断し、最後にそれらをバインドすることでしたが、これはどれも機能しないようでした思った通り。

他に試すことは考えられないので、それが私が間違っていることなのか、それともこのように達成することさえ不可能なのかはわかりません。

これは、私が考えられる限り多くの情報を含めようとした最初の質問です。十分な情報であるといいのですが。

4

4 に答える 4

2

これを試して

$(document).ready(function() {
    $(window).scroll(function() {
        var b = $(window).scrollTop();
        $("#access").toggleClass("normal", b == 0)
        $("#access").toggleClass("scroll", b > 0)
    });
    $("#access").hover(function() {           
        if($(window).scrollTop() > 0){
            $("#access").toggleClass("normal scroll");
        }
    });
});​

http://jsfiddle.net/bJquD/6/

于 2012-08-08T23:03:17.810 に答える
0

ページのスクロール状態を考慮していなかったため、ページがスクロールされたかどうかに関係なく、mouseenter/mouseleave イベントはクラス名を関係なくリセットしていました。予想通り、これはあなたが望んでいたものとは一致しませんでした.

これに対する明らかな解決策は、グローバル変数を使用して (jQuery ドキュメント対応の範囲内ではありますが) これを追跡し、hover()関数でそれをチェックすると、次のようになります。

var scrolled = false;

$(window).scroll(
    function(){
        var b = $(window).scrollTop();
        if (b == 0) {
            $('#access').removeClass('scroll').addClass('normal');
            scrolled = false;
        }
        else if (b > 0) {
            $('#access').removeClass('normal').addClass('scroll');
            scrolled = true;
        }
    });

$('#access').hover(
    function(){
        if (scrolled) {
            // window scrolled, hence access class should be 'scroll'
            $('#access').removeClass('scroll').addClass('normal');
        }
    },
    function(){
        if (scrolled) {
            // window scrolled, hence access class should be 'normal' (from mouseenter)
            $('#access').removeClass('normal').addClass('scroll');
        }
    });​

JS フィドルのデモ。

この結果、ページがスクロールされていない場合、mouseenter/mouseleaveイベントは何もしません (そうすべきではないためnormal、この場合、クラス名は正しいです)。一方、ページがスクロールされている場合、スクロール クラス名は削除されます。でmouseenter復元しmouseleaveます。

于 2012-08-08T22:46:37.980 に答える
0

ここでは、変数 isOnTop を追加するだけで、mouseenter および mouseleave ハンドラーは何かを行う前にそれをチェックします。 

$(document).ready(function() {
var isOnTop=1;
    $(window).scroll(function() {
        var b = $(window).scrollTop();

        if (b > 0) {
            isOnTop=0;            
            $("#access").removeClass("normal").addClass("scroll");
        }

        else if (b == 0) {
            isOnTop=1;
            $("#access").removeClass("scroll").addClass("normal");
        }

    });

    $("#access").mouseenter(function() {
        if(isOnTop){return;}
        $(this).removeClass("scroll").addClass("normal");
    });

    $("#access").mouseleave(function() {
        if(isOnTop){return;}
        $(this).removeClass("normal").addClass("scroll");
    });
});​
于 2012-08-08T22:46:55.087 に答える
0

そうです、その要素に一連のイベント ハンドラーを追加しているため、最終的にページが信じられないほど遅くなります。あなたはそれを控えたいと思っています。または、イベントをバインドしてから、ページの上部までスクロールしたときにそれらを削除することもできます。これを行う最善の方法は、以下のコードを使用することです。

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 0) {
            $("#access").removeClass("normal").addClass("scroll").on('mouseenter', function() {
                $(this).removeClass("scroll").addClass("normal");
            }).on('mouseleave', function() {
                $(this).removeClass("normal").addClass("scroll");
            });
        } else {
            $("#access").removeClass("scroll").addClass("normal").off('mouseenter mouseleave');
        }
    });
});​

こちらからもお試しいただけます。

うまくいけば、それはあなたを助けます:)

于 2012-08-08T22:53:00.860 に答える