Создание второго логотипа исчезает при прокрутке назад

Question

У меня есть 2 логотипа, один большой, один маленький. Когда я прокручиваю страницу вниз, меньший логотип загружается и больше (оригинал исчезает). Что действительно здорово, так это то, что когда я прокручиваю резервную копию страницы, появляется более крупный логотип, но проблема заключается в том, что маленький логотип по-прежнему остается видимым. Как так? Что я делаю не так?

Обратите внимание, что я уже пытался переключить событие во 2-й функции.

<script> 
    $(window).on('scroll', function() { 
    var value = $(this).scrollTop(); 
    if (value < 100) 
     $("#logo").css("display", "none");  
     $("#smalllogo").css("display", "inline");  
    }); 


    $(window).on('scroll', function() { 
    $("#logo").toggle($(this).scrollTop() < 100); 
}); 
</script> 

HTML-

  <a class="" href="index.html"> 

       <?php if ($logo) { ?> 
        <div id="logo" style="padding-bottom: 30px;"> 
         <a href="<?php echo $home; ?>"><img src="logo.png"></a></div> 
       <?php } ?> 

       <div id="smalllogo"> 
        <a href="index.php"><img src="image/smalllogo.png"></a> 
       </div> 

      </a> 

Соответствующий CSS

#smalllogo{ 
    display: none; 
} 

Заранее спасибо

Answer 1

Я полагаю, вы бы просто переключить его в другую сторону?

$(window).on('scroll', function() { 
    $("#logo").toggle($(this).scrollTop() < 100); 
    $("#smalllogo").toggle($(this).scrollTop() > 100); 
});