Sticky-nav Logo

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 :ok_hand:t3:

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)

1 Like

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

1 Like

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.

1 Like

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 :thinking::grin:

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 :sweat_smile:.

That’s a URL for placeholder images :rofl:

You replace that link with your one.

1 Like

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

CleanShot 2023-11-15 at 08.10.16@2x

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');
        }
    });
});
1 Like

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