0

ページの上部に div (.dock) を固定しています。下にスクロールすると消えて、上にスクロールすると再び表示されます。それはうまくいきます。後でドックをページの下に表示するために、ユーザーはメニューバー (.hover-dock) にカーソルを合わせることができます。このホバー機能は、200 を超えるスクロール後にのみ発生します。

これは最初は機能しますが、スクロールして一番上に戻ると、ホバー機能がアクティブになり、ドックがドッキングされたままになるはずのときに混乱を引き起こします。ここで何が間違っていますか？これが私のコードです...

$(window).scroll(function() {

if ($(this).scrollTop()>200)
 {
    $('.dock').hide();
    $('#sticky-nav').css('padding-top', '30px');
    $('.feed').css('margin-top', '30px');



//Push down the filter and feed
$('.hover-dock').hover(function(){
    $('.dock').show();
    $('#sticky-nav').css('padding-top', '125px');
    $('.feed').css('margin-top', '125px');
}, function(){
    $('.dock').hide();
    $('#sticky-nav').css('padding-top', '30px');
    $('.feed').css('margin-top', '30px');
}); 



 }
else if ($(this).scrollTop()<200)
 {
  $('.dock').show();
  $('#sticky-nav').css('padding-top', '125px');
  $('.feed').css('margin-top', '125px');
 } 
});
4

1 に答える 1

1

もし私があなただったら、このようにしていただろう。関数の外側にホバー ハンドラーを追加しscroll()ます。scrollTop()ホバリング中に 200px を超えるか下回るかを知るために、フラグを追加します。

var top = true;

$(window).scroll(function () {
    if ($(this).scrollTop() > 200) {
        $('.dock').fadeOut();
        $('#sticky-nav').css('padding-top', '30px');
        $('.feed').css('margin-top', '30px');
        top = false;
    } else if ($(this).scrollTop() < 200) {
        $('.dock').fadeIn();
        $('#sticky-nav').css('padding-top', '125px');
        $('.feed').css('margin-top', '125px');
        top = true;
    }
});

//Push down the filter and feed
$('.hover-dock').hover(function () {
    if (top == false) {
        $('.dock').fadeIn(100);
        $('#sticky-nav').css('padding-top', '125px');
        $('.feed').css('margin-top', '125px');
    }
}, function () {
    if (top == false) {
        $('.dock').fadeOut(150);
        $('#sticky-nav').css('padding-top', '30px');
        $('.feed').css('margin-top', '30px');
    }
});

フィドル

于 2013-10-15T15:00:22.250 に答える