Sticky menu with different logo

Hi guys, I’d like to change the logo in the sticky menu that appear when I scroll down the page. in the homepage I a big vertical logo, I’d like to change it in the scroll bar and put an horizontal logo. is it possible? tx a lot

this is the test page where I uploaded the website.
http://classyday.xyz/memorabilia/

You could do something like this…

No doubt there are other ways.

I didn0t understand. a video tutorial would be perfect :slight_smile:

Hi Davide,

It’s a bit different method I think, but you might find this tutorial helpful. (if you haven’t watched it already)

Cheers,
Eldar

Hey @davideakadudu

Here is a short video on how to use that code. Hope it helps. Let me know if you need more help with it.




EDIT: Adding the code here for simplicity

<script>
var logoOne = $('.navbar-brand').find('img').attr('src');
var logoTwo = 'https://via.placeholder.com/60'
var scrollDistance = '30'

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>
6 Likes

Hey @PeteSharp

your help in this forum here is invaluable indeed… I really mean it.

Pete, could you please share the same script code snippet, but where both logos are stored locally among the project assets (not under some url)?
I mean basically the part, where you define the variables for the images to grab.

I might have an idea, but my javascript knowledge is quite limited (was too long ago :slightly_smiling_face:)…

Thanks a lot!

hey this is great video !

I wanted to do something like this a while back - will be great to refer back to this. I originally wanted to have this so the text was a different colour too, but the logo change is great.

Hey @Maxim,

Unfortunately at present, if the image is not being used in Blocs it doesn’t export it. Sometimes what I will do is create a temporary page with the image(s) and I will be able to link to it eg… “img/myimage.jpg”.

Or I just upload the image to my server and link to it.

The other option is to make a Custom Bric for this, which I can probably do at some stage. That way its all just set in the side panel.

1 Like

You don’t need Javascript for that, you can do with it purely with CSS.

1 Like

thank you very much @PeteSharp, it works great!
you can see the result on the test page http://classyday.xyz/memorabilia/
what do you think about this website?
tx a lot

@PeteSharp maybe it’s a stupid question, but I’m new so I’m asking you anyway. when I view this website I’m workin on http://classyday.xyz/memorabilia/ in a large window everything is ok, but if I narrow the browser or if I view the site from a smartphone, the vase on the right disappears and I can’t see it anymore. how do i pin the background image on the right so that it is always visible?
tx

@PeteSharp

Thank you for explanations, I saw it in your code and just wondered, because the first image asset is built-in and the second is an url… :wink:

So, basically If I place those images on a dedicated (hidden) page, e.g.

/img/logo1.jpg

/img/logo2.jpg

the code would be something as follows? Please correct me if I’m wrong.

Cheers!

Maxim

Yes you can do that. The code you put is a little wrong.

var logoTwo = '/img/logo1.jpg'
var logoTwo = '/img/logo2.jpg'

I saw your other thread, I will post in there. But its late here, I’m off to bed. :sleeping:

ok thank you very much. I wait for it

@davideakadudu

For those who might need it: here is a small follow-up about my question of logo change on scroll here. All kudos go to @PeteSharp. :point_left: It is his solution and his script!

I just want to add how to create same result, where both logos are local assets of your choice and not url (it was basically my question to @PeteSharp above).

So here is how I did it:

  1. Create a hidden Page in Blocs and place the logo images there:

In my example:

First image is named: Logo1.png
Second image is named: Logo2.png

Check the Screenshot below.

  1. Then adjust the above JavaScript (as @PeteSharp suggests) in the project page or project footer (project footer in my case) as follows:
<script>

var logoOne = ‘/img/Logo1.png’
var logoTwo = ‘/img/Logo2.png’
var scrollDistance = ‘30’

window.addEventListener(‘scroll’, function() {
if ((<span style="color: #008000; font-weight: bold">this</span>).scrollTop() <span style="color: #666666">&lt;</span> scrollDistance) { (’.navbar-brand img’).attr(‘src’,logoOne);
}
if ((<span style="color: #008000; font-weight: bold">this</span>).scrollTop() <span style="color: #666666">&gt;</span> scrollDistance) { (’.navbar-brand img’).attr(‘src’,logoTwo);
}
})
</script>

2 Likes

Can I ask you about this type of sticky? It vanishes as you scroll towards the top of the page and then gently returns as you scroll down:

Thank you!

Hello @sim, if @PeteSharp allow me you can check this website, and the solution with a little of changes in Blocs works very well:

1º Add a “Navigation menu” bloc.

2º In the navigation menu bloc change the ID to site-header

3º In page settings, add the following code:

<style>
#site-header {
	position: fixed;
	height: 60px;
	top: 0;
	width: 100%;
	z-index: 100;
	transition: all .3s ease;
}

#site-header.hide {
	top: -60px;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {

  var doc = document.documentElement;
  var w = window;

  var prevScroll = w.scrollY || doc.scrollTop;
  var curScroll;
  var direction = 0;
  var prevDirection = 0;

  var header = document.getElementById('site-header');

  var checkScroll = function() {

    /*
    ** Find the direction of scroll
    ** 0 - initial, 1 - up, 2 - down
    */

    curScroll = w.scrollY || doc.scrollTop;
    if (curScroll > prevScroll) { 
      //scrolled up
      direction = 2;
    }
    else if (curScroll < prevScroll) { 
      //scrolled down
      direction = 1;
    }

    if (direction !== prevDirection) {
      toggleHeader(direction, curScroll);
    }
    
    prevScroll = curScroll;
  };

  var toggleHeader = function(direction, curScroll) {
    if (direction === 2 && curScroll > 60) { 
      
      //replace 60 with the height of your header in px

      header.classList.add('hide');
      prevDirection = direction;
    }
    else if (direction === 1) {
      header.classList.remove('hide');
      prevDirection = direction;
    }
  };
  
  window.addEventListener('scroll', checkScroll);

})();
</script> 

Hope it helps you…

5 Likes

Thank you very much. I’ll give it a go. I can see this being a very popular bit of code.

Thank you for this tutorial.
I would like the original logo in 100 px size to be replaced by the same logo in 70 px size. Do I need to use this script or is there another method (class). A little help please. Thanks