This answer is merely a complement to reply from @hugocsl.
When it comes to events like scroll, resize or mousemove It is always important to remember that they are launched several times per second as the user interacts with the page. That is, depending on what you do within the function Handler of the event, you can slow down your page (e.g., access the DOM).
If there is no need to perform this function so repeatedly you can use the techniques debounce and throttle, which serve to limit the execution of a function over a period of time.
The debounce will wait for the event to stop launching for X seconds before activating the function Handler.
The throttle will only allow the function Handler run every X seconds.
Example:
// 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));
Another optimization, much simpler, is to save the DOM element in a variable to use later, since access to the DOM is costly in terms of performance.
Instead of:
$(window).scroll(function() {
// é executado cada vez que 'scroll' é lançado
$("#brand-image").fadeOut();
});
It’s more performative to use:
// É executado apenas uma vez
var $brandImage = $("#brand-image");
$(window).scroll(function() {
// Usa a refêrencia salva anteriormente
$brandImage.fadeOut();
});
And the last and least impactful is that when you do:
$(window).scrollTop()
You are converting a Domelement into a jQuery object, it is not as expensive as accessing the DOM, but it can still be easily replaced by the property window.pageYOffset which is native and compatibility is acceptable (IE 9+).
Below follows the code of @hugocsl with the Handler of normal events, with debauch and with Throttle to illustrate the importance of these techniques.
PS: In the examples I am using the methods _.debounce() and _.throttle() library 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>
Debauchery
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>
First: what version of bootstrap are you using?
– Jorge.M
The latest version 4.1.3
– GhostX