Esta resposta é apenas um complemento à resposta do @hugocsl.

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/