Resize Top Bar logo when scrolled

In this lesson we are using the ScrollUp stack to detect when the page is scrolled by a certain amount and so when to apply out logo size change. You can achieve the same effects but instead when a sticky bar becomes fixed by a simple alteration to the selector and the optional use of the Pin stack. We will cover this in a separate post.

The Main things we need to consider are as follows.

• The resizing of the bar height as the page is scrolled
• Similar resizing of the logo

Resizing the bar height when scrolled.

This is the simplest of the tasks ahead as we can use the ScrollUp stack.

It is simple enough to do this with vanilla CSS but ScrollUp gives us a big advantage. It adds classes when the scroll threshold has been reached. We can therefore use these classes to control all the aspects of the bar that change upon scrolling without having to get our hands dirty with JavaScript.

I say our hands, I obviously mean your hands as mine are already filthy dirty with the ScrollUp code

Setup ScollUp as normal, adding colors for the bar background and dropdowns as required. In this case the bar is black 70% opacity before scroll and 50% opacity when scrolled.

We also need to set some top and bottom padding to keep the menu items centered when the bar expands in height. How much really depends on the size of your TopBar text.

Logo resizing

So its time to write some CSS. We will be prefixing our TopBar classes with the ones provided by the ScrollUp stack to indicate when the page has been scrolled. They couldn't be more obvious:

.scrolled Tells is that the page has been scrolled beyond the threshold set in the stack settings.

.notScrolled Is the class present before the user has scrolled the page.

So the first thing to do is to make the logo larger than the defaults set in Foundation. Lots of people ask about this and it is incredibly easy.

Here is the code not forgetting our .notScrolled class (which is not strictly necessary here but it makes the code clearer). All we do is set a position relative and a fixed width, letting the height auto scale to retain the image proportions.

.notScrolled .top-bar .name img{
    position: relative;
    width:200px!important;
    height:auto!important;
    transition: all 0.7s ease;
    transform-origin: left center;
    -webkit-transform: translateZ(0);
}

The transform instructions are simply to produce a smooth animated transition between the two sizes. The final -webkit-transform:translateZ(0) is a trick to force hardware acceleration in webkit browsers which smooths things out further.

NOTE: Not all vendor prefix codes are included in this article, you must add them to ensure cross browser compatibility

Now, similarly for the scrolled state, we can make the logo smaller. There are several ways we could do this. We could reduce the size defined above, we could even swap out the image for a smaller version. Neither of these techniques will give us a smooth animation though, so instead we will use the CSS scale function to simply scale down the logo. This will give us the smooth animation that we want.

Note how this time we are specifying the .scrolled class. Remember this is being applied to the scrollUp stack in which the Top Bar sits and so it is the "outer" element and goes first in our selector.

And it is as simple as that. As soon as ScrollUp has detected a page scroll as per its stack settings, a class of .scrolled is added to it. At this point the above code becomes applicable and the title image in TopBar is scaled down to 70% of its original size.

Now, all this is great but we don't want these transforms applied to the mobile menu or it will look terrible. In addition, because TopBar uses the site-title area in mobile mode to form the bar, the animations will send everything wild.

So our final job is to wrap the above code in a media query. This should be set to the same screen width as the setting in the TopBar stack. If you have it set to use the mobile menu for small screens only, this will be 40.063em. If you using a different size then see the Foundation Media Queries Page for the value you need.

 
@media screen and (min-width:40.063em){
//Code from above goes here
}

In Part 2 of this series, we will cover the hover effects and constraining them to just the text. We will also, in so doing, create a load of problems for ourselves with the drop-down menu which will be sorted out in Part 3.

And one more thing.....

Everyone is always asking about overflowing logos for TopBar. You can simply use the above code to do it - without the transforms of course. You can either use an image with an aspect ratio that is taller than the Pandora one above and it will overflow, or use can force the issue using a margin-top: to push it down.