When scrolling the page, the image disappears, but the menu stays visible at the top of the page. There is a script in a HTML element that makes this possible, provided that the page has enough contents to make it scroll at all. This functionality can't be shown here, because it would interfere with the site menu, but if you download the component, you will be able to see it.
Important: The script is using the ID of the menu, #shrinkNavbar, and the class name .contentof the container coming immediately after the menu. That means, that you can change most things (image, colours etc), but those two names must be kept, and the two elements have to remain in the same sequence all the time. When you add further contents to the site where you are using this component, you may add it into the .contentor, preferrably, make your own sections below it.
Sticky Shrinknav
When scrolling the page, the image disappears, but the menu stays visible at the top of the page. There is a script in a HTML element that makes this possible, provided that the page has enough contents to make it scroll at all. This functionality can't be shown here, because it would interfere with the site menu, but if you download the component, you will be able to see it.
Important: The script is using the ID of the menu, #shrinkNavbar, and the class name .content of the container coming immediately after the menu. That means, that you can change most things (image, colours etc), but those two names must be kept, and the two elements have to remain in the same sequence all the time. When you add further contents to the site where you are using this component, you may add it into the .content or, preferrably, make your own sections below it.
Download this component