So I have this navbar with a logo on it. I would like the logo to be big when the user is in the header section of the page, but then shrink when the user scrolls down. Any way to do this? 

```
 <!-- NAVBAR -->
        <nav class="navbar navbar-inverse navbar-toggleable-md fixed-top">

            <button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv"  aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="container">
                <a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a>
                    <div class="collapse navbar-collapse" id="navbarDiv">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item">                     
                                <a class="nav-link" href="#home" >Home <span class="sr-only">(current)</span></a>                         
                            </li>                       
                            <li class="nav-item">                         
                                <a class="nav-link" href="#about-us">About</a>                        
                            </li>                       
                            <li class="nav-item">                         
                                <a class="nav-link" href="#pricing">Pricing</a>                       
                            </li>                       
                        </ul>           
                    </div>                  
            </div>              
        </nav>

```