How is it possible to change the logo when scrolling down on sticky nav bar?
Hey @Alessio_lupatelli,
Welcome to the Blocs Forum.
You can do this with a bit of JavaScript in the page footer
Change the 3 Var’s to suit. Change the URL for logoTwo
and set how far you want to scroll before they change. It is in pixels.
EDIT: Made it so the first logo is what ever you set in Blocs.
<script>
var logoOne = $('.navbar-brand').find('img').attr('src');
var logoTwo = 'https://via.placeholder.com/60'
var scrollDistance = '200'
window.addEventListener('scroll', function() {
if ($(this).scrollTop() < scrollDistance) {
$('.navbar-brand img').attr('src',logoOne);
}
if ($(this).scrollTop() > scrollDistance) {
$('.navbar-brand img').attr('src',logoTwo);
}
})
</script>
Ty, it works perfectly
Great,
If you do have any issues, you might need to change var logoOne
to a URL, like logoTwo.
Ok thank you for the advice…I’ll keep it in mind.
All the best
@PeteSharp I am trying to achieve this while you scroll, but I can´t understand how it calls the second image, It uses a real URL or that´s blocs nlibrary? I have to set the name of the asset and the extension?
Thank you!
Hi @chicuelo,
The logoTwo variable has the url for the second image. I was grabbing the existing logo url with logoOne.
This was using JQuery also. So if you’re using Bootstrap 5 it will need to be rewritten in pure JavaScript.
I am using B4, but how do I link the desired logo? In my case my second logo is “logo-color.svg”, I should upload to a server and place that url (example: myurl.com/logo-color.svg)? Or it gets from the library? should I use the name of the file or another variable? In your example your url is https://via.placeholder.com/60 (Can´t understand what 60 points to)
This old post helped. It has a good breakdown and pictures.
I did see this, but not sure how relevant ant it is today.
https://laracasts.com/discuss/channels/javascript/bootstrap-navbar-changing-logo-on-scroll
I was looking that post, but have no results. Maybe i am using svg format and it doesn´t work (I have exported and saved the logo on the img file so it could be readed)
@chicuelo upload second image. On preview Boocs doesn’t know your using the image and doesn’t include it.
For testing you can throw the image somewhere and blocs will include it.
Thank you Pete, I finally used a code from this source and its working great (I placed and hided the second logo to avoid exporting and copying the image over and over)
https://laracasts.com/discuss/channels/javascript/bootstrap-navbar-changing-logo-on-scroll
Maybe you had a typo in the other one. It’s much the same
The script I used was much more clear to understand for me so I could properly match the assets. I am still figuring what /60 was pointing to on the first script .
That’s a URL for placeholder images
You replace that link with your one.
Hi guys, Im having an issue with blocs 5 and B5.
I had a site (built in B4, then migrated to B5), with this code and its working fine, but when I try to replicate the same on a fresh Blocs 5 project it does not works. I created the clas nav-brand-img and applied to the logo, placed the secondary logo and hided, tested and nothing happens.
Placed on the footer area
<script>
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() < 3) {
$('.nav-brand-img img').attr('src','img/devrank-logo.svg');
}
if ($(this).scrollTop() > 3) {
$('.nav-brand-img img').attr('src','img/devrank-logo.svg');
}
})
});
</script>
Also tried the code Pete shared before but It won´t work either for me.
Here I share a video showing one site working and the other not working but the same settings:
Anyone can see whats wrong?
Thanks!
Working fine
Not working
Since you have added the class to the image you don’t need “.nav-brand-img img” just “.nav-brand-img”
Also, here is a pure javascript version of the code your using (with the selector change), no need for jQuery these days.
document.addEventListener('DOMContentLoaded', function () {
window.addEventListener('scroll', function () {
if (window.scrollY < 3) {
document.querySelector('.nav-brand-img').setAttribute('src', 'img/devrank-logo.svg');
}
if (window.scrollY > 3) {
document.querySelector('.nav-brand-img').setAttribute('src', 'img/devrank-logo.svg');
}
});
});
Thank you so much Pete, but it does not works either. Don’t know why. I have tried deleting the assets, renaming and placing new ones. But the same result. I also disabled lazy loading (useless because both assets are loaded at launch). What I have tried is setting the scroll trigger to 800 px and that was ignored too.
What can be happening?
What errors do you get in the browser inspector