Change size or opacity of navbar on scroll

Styling (CSS)
1

I’m just getting used to Pinegrow and using it to refresh my HTML and CSS skills at the same time. I’ve been out of it for a while so a bit rusty.

I’m curious how you go about animating the navbar on scroll. For instance changing the navbar height, opacity or color on scroll. I tried the transition settings but I can’t seem to hook it up to a scroll trigger. Or perhaps I’m not understanding the function.
Let’s assume I’m using Pinegrow blocks for simplicity.

Any help would be appreciated.

2

You need to use Javascript to trigger events on scroll, while you use CSS to change the look, feel, position, size, etc, of a component.

So, for example, the follow script will either add or remove the class .shrinknav from the component with the Id of #nav

<script>
$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
        $('nav').addClass('shrinkbar');
         } else {
        $('nav').removeClass('shrinkbar');
  }  
});
</script>

Then the class .shrinkbar can change the height or opacity of the #nav with a CSS rule

.shrinkbar {
height: 80 px;
background-color: rgba(185,0,0,.3);
}

This is the basic idea. There are many scripts out there to achieve these things, so you don’t have to write custom code, but it’s always good to understand how it’s done.

3 Likes
3

Thank you for the very helpful response.
That actually helps a lot.