スクロールトップを正しく使用して2回トリガするにはどうすればよいですか？

Question

私のロゴのCSSを変更しようとしています。ウェブサイト上の特定のポイントに達したら、特定のセクションが完成した後にバックグラインドします。 しかし、私はそれを正しく行うのに問題があります。どんな助け？

私はすでにこのスクロール機能を作っていますが、それは一方向にしか機能しません。

$(document).ready(function() { 
    $(window).scroll(function() { 
    if($(this).scrollTop() > 600) { 
     $(".uk-responsive-height").css("display", "none"); 
     $(".uk-logo-inverse").css("display", "block"); 
    } else if($(this).scrollTop() > 999) { 
     $(".uk-logo-inverse").css("display", "none"); 
     $(".uk-responsive-height").css("display", "block"); 
    } 
    }); 
}); 

これは私に役立ちました。これが最善の方法であるかどうかはわかりません。私は自分のページに合わせて数字を微調整しました。

$(document).ready(function() { 
    $(window).scroll(function() { 
    if($(this).scrollTop() > 1700) { 
     $(".uk-responsive-height").css("display", "block"); 
     $(".uk-logo-inverse").css("display", "none"); 
    return; 
} 
if ($(this).scrollTop() > 600) { 
    $(".uk-responsive-height").css("display", "none"); 
    $(".uk-logo-inverse").css("display", "block"); 
} 
if ($(this).scrollTop() < 600) { 
    $(".uk-responsive-height").css("display", "block"); 
    $(".uk-logo-inverse").css("display", "none"); 
    } 
    }); 
}); 

Answer 1

たぶん私はこれを言う必要がまず最高scrollTop()をチェックして、このコメント

後その

if($(this).scrollTop() > 999) { 
    $(".uk-logo-inverse").css("display", "none"); 
    $(".uk-responsive-height").css("display", "block"); 

    return; 
} 

if($(this).scrollTop() > 600) { 
    $(".uk-responsive-height").css("display", "none"); 
    $(".uk-logo-inverse").css("display", "block"); 
} 

後に機能を中断するようにしてください。 2つのロゴがあり、1つは通常の白で、もう1つは黒です。このコードはほとんど動作しますが、両方のロゴを表示し始めます。それらの特定のピクセルのバック

この

if ($(this).scrollTop() > 600 && $(this).scrollTop() < 1000) { 
    $(".uk-logo-inversed").css("display", "block"); 
    $(".uk-responsive-height").css("display", "none"); 
} else { 
    $(".uk-logo-inversed").css("display", "none"); 
    $(".uk-responsive-height").css("display", "block"); 
} 

または溶液とを試していない限り、私は、それを」.ukのロゴ-反転、それは除去されなければならないことをした後、600から1000の間に表示ブロックする必要があります少ないコード

$(".uk-logo-inversed")[$(this).scrollTop() > 600 && $(this).scrollTop() < 1000 ? 'show' : 'hide'](); 
$(".uk-responsive-height")[$(this).scrollTop() > 600 && $(this).scrollTop() < 1000 ? 'hide' : 'show']();