A forma mais simples de resolver isso (se você quer que o evento seja ativado apenas uma vez cada vez que o usuário visitar a página.) seria usar uma variável pra checar se o comportamento já ocorreu (ou não).
var hasBeenTriggered = false;
$(window).on('scroll', function(e){
//aparece segundo menu
if($(this).scrollTop() >= navHeight + section01Height && !hasBeenTriggered){
navSecundariaShow();
hasBeenTriggered = true;
}
else if($(this).scrollTop() < navHeight + section01Height && hasBeenTriggered){
navSecundariaHide();
}
});
Você também pode trocar o &&
do else if
por um condicional OR ||
, conforme a sua necessidade. Dessa forma a princípio ele verifica se o seu painel já foi exibido, se não foi, exibe e muda o estado para true
. Assim, esse código não se executa mais, a não ser que você mude isso no código mais tarde.
Adicionalmente, você pode deixar o && hasBeenTriggered
do bloco else if
que retornará sempre true
se o painel já tiver sido aberto, para se certificar que o método navSecundariaHide()
não seja chamado desnecessáriamente no futuro.
Não sei se era exatamente esse seu objetivo. Essa é a forma mais simples que consigo pensar no momento.
EDIT: Aplicando o exemplo do @Renato Tavares ao exemplo do OP, ficaria algo assim:
$(window).one('scroll', function(e){ ... }
Ao invés de chamar o método .on(event,handler)
, trocá-lo por .one(event,handler)
como sugerido faria com que o evento fosse ativado apenas a primeira vez que é chamado. Para outros usos pode-se ver o link que nosso colega colocou dos docs de jQuery. Embora não tenha tido tempo de testá-lo, parece que o uso seria até mais simples do que o uso da variável hasBeenTriggered
conforme sugeri.
O upside de usar a variável seria o caso de você desejar verificar se o painel ainda está aberto ou fechado, dependendo de como é o fluxo do seu código e seu objetivo.