So I have done this before, but cannot remember how I did it. Having the Logo swap out on scroll, but it transitions smoothly. (I am shrinking the whole nav bar, as I change from a logo that has an icon and text to just text).
The code below works, but it’s not pleasant, and it could be entirely wrong for making a nice smooth transition? Any help would be appreciated.
<script>
window.onscroll = function() {myFunction()};
var trigger = document.getElementById("myID");
var swap = trigger.offsetTop -250;
function myFunction() {
if (window.pageYOffset >= swap) {
$('.navbar-brand img').attr('src','img/logo_text.png').fadeIn(1000);
} else {
$('.navbar-brand img').attr('src','img/logo.png').fadeIn(1000);
}
}
</script>
