Esta resposta é apenas um complemento à resposta do @hugocsl.
Quando se fala de eventos como scroll
, resize
ou mousemove
é 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
, que servem para limitar a execução de uma função em um período de tempo.
O debounce
vai esperar que o evento pare de ser lançado por X segundos antes de ativar a função handler.
O throttle
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
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()
e _.throttle()
da biblioteca lodash.
Normal
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();
}
});
#scroll-helper {
position: fixed;
top: 80px;
left: 10px;
}
<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>
Debounce
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));
#scroll-helper {
position: fixed;
top: 80px;
left: 10px;
}
<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>
Throttle
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));
#scroll-helper {
position: fixed;
top: 80px;
left: 10px;
}
<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>