JQuery: Непрозрачность анимация с клейкой навигационной панелью работает только один раз

Question

У меня есть липкий Navbar, используя этот код:

var stickyNavTop = $("#mynavbar").offset().top; 
var winheight = $(window).height(); 
var relation = stickyNavTop/winheight; 

function fixNavBar() { 

    var stickyNav = function(){ 
     var winheight = $(window).height(); 
     var elempos = winheight * relation; 
     var scrollTop = $(window).scrollTop(); 

     if (scrollTop > elempos) { 
      $("#mynavbar").addClass('sticky'); 
      $("#logo").animate({opacity: 1}) // <- first animation 
     } else { 
      $("#mynavbar").removeClass('sticky'); 
      $("#logo").animate({opacity: 0}) // <- second animation 
     } 

    }; 

    stickyNav(); 

    $(window).scroll(function() { 
     stickyNav(); 
    }) 
} 

fixNavBar(); 

CSS-код:

.sticky { 
    position: fixed; 
    width: 100%; 
    left: 0; 
    top: 0; 
    z-index: 100; 
} 

#logo { 
    position: absolute; 
    left: 0px; 
    opacity: 0; 
} 

Когда я только добавить первую анимацию она работает отлично. Когда я добавляю второй, чтобы сбросить непрозрачность до 0 при прокрутке, она выполняется немедленно при загрузке страницы. В этом случае логотип всегда невидим.

Я загрузил preview here (минимизировать окно, появляется недо меню значок, вторая анимация закомментирована)

Большое спасибо заранее ... Jan

Answer 1

Если я правильно понимаю, вы хотите, чтобы показать небольшой логотип, когда верхнее положение прокрутки после первого коричневого блока и скрыть его в противном случае.

Каждый раз, когда вы прокручиваете, вы запускаете новую анимацию, jQuery ставит в очередь все анимации. Чтобы скрыть логотип при прокрутке вверх, вы должны остановить все предыдущие незавершенные анимации.

if (scrollTop > elempos) { 
     $("#mynavbar").addClass('sticky'); 
     $("#logo").animate({opacity: 1}) 
    } else { 
     $("#mynavbar").removeClass('sticky'); 
     $("#logo").stop(true); // Stop all previous animations 
     $("#logo").animate({opacity: 0}) 
    }