Esta resposta é apenas um complemento à [resposta do @hugocsl][11]. Quando se fala de eventos como [`scroll`][2], [`resize`][3] ou [`mousemove`][1] é sempre importante lembrar que eles são lançados várias vezes por segundo enquanto o usuário interage com a página. Ou seja, dependendo do quê você faz dentro da função *handler* do evento, você pode deixar sua página lenta (ex.: acessar o DOM). Se não há necessidade de executar esta função tão repetidamente você pode usar as técnicas [`debounce` e `throttle`][4], que servem para limitar a execução de uma função em um período de tempo. O [`debounce`][5] vai esperar que o evento pare de ser lançado por X segundos antes de ativar a função *handler*. O [`throttle`][6] só vai permitir que a função *handler* seja executada a cada X segundos. Exemplo: // Só vai executar quando o usuário para de digitar por 1 segundo $elemento.on('keyup', _.debounce(function() { console.log('debounce'); }, 1000)); // Enquanto o usuário seguir digitando, vai executar a cada segundo $elemento.on('keyup', _.throttle(function() { console.log('throttle'); }, 1000)); --- Outra otimização, bem mais simples, é salvar o elemento DOM em uma variável para usar depois, visto que o acesso ao DOM é custoso em termos de performance. Ao invés de: $(window).scroll(function() { // é executado cada vez que 'scroll' é lançado $("#brand-image").fadeOut(); }); É mais performático usar: // É executado apenas uma vez var $brandImage = $("#brand-image"); $(window).scroll(function() { // Usa a refêrencia salva anteriormente $brandImage.fadeOut(); }); E a última e menos impactante é que, quando você faz: $(window).scrollTop() Você está convertendo um DOMElement em um objeto jQuery, não é tão custoso quanto acessar o DOM, mas ainda sim pode ser facilmente substituído pela propriedade [`window.pageYOffset`][7] que é nativo e a compatibilidade é aceitável (IE 9+). --- Abaixo segue o código do @hugocsl com o *handler* de eventos normal, com *debounce* e com *throttle* para ilustrar a importância destas técnicas. PS: Nos exemplos estou usando os métodos [`_.debounce()`][8] e [`_.throttle()`][9] da biblioteca [lodash][10]. --- ## Normal <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> var $brandImage = $("#brand-image"); var $scrollHelper = $("#scroll-helper"); var count_scroll = 0; $(window).scroll(function() { $scrollHelper.html("scroll triggered: " + ++count_scroll); if (this.pageYOffset >= 140) { // 140 é a distancia que vc rola antes da logo sumir $brandImage.fadeOut(); } else { $brandImage.fadeIn(); } }); <!-- language: lang-css --> #scroll-helper { position: fixed; top: 80px; left: 10px; } <!-- language: lang-html --> <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" /> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top"> <a class="navbar-brand" href="#"> <img id="brand-image"src="https://placecage.com/50/50" /> </a> <button class="navbar-toggler"> <span class="navbar-toggler-icon"></span> </button> </nav> <div style="height:1000px; width: 100ps;"></div> <span id="scroll-helper">scroll triggered: 0</span> <!-- end snippet --> --- ## Debounce <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> var $brandImage = $("#brand-image"); var $scrollHelper = $("#scroll-helper"); var count_scroll = 0; $(window).scroll(_.debounce(function() { $scrollHelper.html("scroll triggered: " + ++count_scroll); if (this.pageYOffset >= 140) { // 140 é a distancia que vc rola antes da logo sumir $brandImage.fadeOut(); } else { $brandImage.fadeIn(); } }, 300)); <!-- language: lang-css --> #scroll-helper { position: fixed; top: 80px; left: 10px; } <!-- language: lang-html --> <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" /> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://unpkg.com/[email protected]/lodash.min.js"></script> <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top"> <a class="navbar-brand" href="#"> <img id="brand-image"src="https://placecage.com/50/50" /> </a> <button class="navbar-toggler"> <span class="navbar-toggler-icon"></span> </button> </nav> <div style="height:1000px; width: 100ps;"></div> <span id="scroll-helper">scroll triggered: 0</span> <!-- end snippet --> --- ## Throttle <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> var $brandImage = $("#brand-image"); var $scrollHelper = $("#scroll-helper"); var count_scroll = 0; $(window).scroll(_.throttle(function() { $scrollHelper.html("scroll triggered: " + ++count_scroll); if (this.pageYOffset >= 140) { // 140 é a distancia que vc rola antes da logo sumir $brandImage.fadeOut(); } else { $brandImage.fadeIn(); } }, 300)); <!-- language: lang-css --> #scroll-helper { position: fixed; top: 80px; left: 10px; } <!-- language: lang-html --> <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" /> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://unpkg.com/[email protected]/lodash.min.js"></script> <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top"> <a class="navbar-brand" href="#"> <img id="brand-image"src="https://placecage.com/50/50" /> </a> <button class="navbar-toggler"> <span class="navbar-toggler-icon"></span> </button> </nav> <div style="height:1000px; width: 100ps;"></div> <span id="scroll-helper">scroll triggered: 0</span> <!-- end snippet --> [1]: https://developer.mozilla.org/en-US/docs/Web/Events/mousemove [2]: https://developer.mozilla.org/en-US/docs/Web/Events/scroll [3]: https://developer.mozilla.org/en-US/docs/Web/Events/resize [4]: https://css-tricks.com/debouncing-throttling-explained-examples/ [5]: https://css-tricks.com/debouncing-throttling-explained-examples/#article-header-id-0 [6]: https://css-tricks.com/debouncing-throttling-explained-examples/#article-header-id-5 [7]: https://developer.mozilla.org/en-US/docs/Web/API/Window/pageYOffset [8]: https://lodash.com/docs/4.17.10#debounce [9]: https://lodash.com/docs/4.17.10#throttle [10]: https://lodash.com/ [11]: https://pt.stackoverflow.com/a/331248/6333