Sticky menu with different logo

AdieJAM · October 9, 2020, 9:55am

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.

PeteSharp · October 9, 2020, 9:58am

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.

PeteSharp · October 9, 2020, 10:00am

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

davideakadudu · October 9, 2020, 10:20am

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

davideakadudu · October 9, 2020, 10:32am

@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

Maxim · October 9, 2020, 10:53am

@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…

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

PeteSharp · October 9, 2020, 10:59am

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

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

PeteSharp · October 9, 2020, 10:59am

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

davideakadudu · October 9, 2020, 11:01am

ok thank you very much. I wait for it

Maxim · October 19, 2020, 11:26am

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

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.

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>

sim · October 20, 2020, 10:45am

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!

Pealco · October 20, 2020, 12:37pm

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…

sim · October 20, 2020, 9:25pm

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

Pat · December 8, 2020, 11:10pm

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

Pat · December 21, 2020, 10:33am

Hello
Thank you for your precious help on this forum.
I would like my logo on my navigation bar to change size on my homepage when scrolling and this script is what I am looking for. So I placed this one in my footer homepage :

It doesn’t work in preview mode on Blocs but it works very well in preview mode in browser. On the other hand, as soon as I upload the files on my server and access my site via a browser it doesn’t work.
You can see it on : www.lemoulinduboisset.com

What’s the problem?

Thank you for your help

PeteSharp · December 21, 2020, 10:50am

Hey @Pat

You have another script with a typo. remove the #

Also you shouldn’t need to load two logos to make them resize (unless they are different). You can have the size of the image change.

Pat · December 21, 2020, 10:56am

Thanks for your reply. I removed the #

So how can I make my logo smaller, to take up less space on the screen, when scrolling?

Thank you

PeteSharp · December 21, 2020, 11:03am

There are a couple of ways. You can use the same script and modify it, to add some inline CSS, to change the width and height, or you could use transform scale.

That would look something like…

Replace the two var for the logo with

var logo = document.getElementsByClassName("navbar-brand")[0];

Replace both actions that change the src with the following line, and adjust the scale to suit.

logo.style.transform = "scale(1)";

To go smaller replace the 1 to something like 0.7 etc.

I haven’t tested this, but I am also about to head off to bed.

Pat · December 21, 2020, 12:38pm

Great it works well only in preview mode but not in a browser. And I would also like my navigation bar to have the reduced size as you can see on the other website pages.

Any ideas?

Good night

Pat · December 22, 2020, 9:05am

Hello
It’s really strange. It doesn’t work on a browser, only in preview mode. But when I click on the Logo, its size decreases. You can try: www.lemoulinduboisset.com.
Yet I didn’t put any action on the Logo.
Need some help, please ?
Thanks a lot