# Change size or opacity of navbar on scroll

**URL:** https://forum.pinegrow.com/t/change-size-or-opacity-of-navbar-on-scroll/2275
**Category:** Styling (CSS)
**Created:** [October 6, 2018, 8:47am UTC](https://forum.pinegrow.com/t/change-size-or-opacity-of-navbar-on-scroll/2275 "2018-10-06T08:47:55Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![HookedHangman](https://avatars.discourse-cdn.com/v4/letter/h/6de8d8/32.png) [@HookedHangman](https://forum.pinegrow.com/u/HookedHangman)
#### Post date: [October 6, 2018, 8:47am UTC](https://forum.pinegrow.com/t/change-size-or-opacity-of-navbar-on-scroll/2275/1 "2018-10-06T08:47:55Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)
#### Post date: [October 7, 2018, 3:55am UTC](https://forum.pinegrow.com/t/change-size-or-opacity-of-navbar-on-scroll/2275/2 "2018-10-07T03:55:44Z")

</div>

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

```auto
<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

```auto
.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.

https://codepen.io/Mhmdhasan/embed/preview/mAdaQE?height=300&slug-hash=mAdaQE&default-tabs=css,result&host=https://codepen.io

---

<div class="post-metadata">

### Author: ![HookedHangman](https://avatars.discourse-cdn.com/v4/letter/h/6de8d8/32.png) [@HookedHangman](https://forum.pinegrow.com/u/HookedHangman)
#### Post date: [October 7, 2018, 3:41pm UTC](https://forum.pinegrow.com/t/change-size-or-opacity-of-navbar-on-scroll/2275/3 "2018-10-07T15:41:41Z")

</div>

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