Decrease fixed menu as the page scrolls

Navigation
3

I want to know how to decrease the size of the menu when there is scrolling.

This is my menu: 

header {
    position: fixed;
    width: 100%;
    box-shadow: 0 4px 20px -4px #ababab;
    background: rgba(249, 249, 249, .8);
    transition: background .8s ease;
    z-index: 10;
}

header:hover {
    background: rgb(249, 249, 249);
}

.logo {
    width: 150px;
}

.main-menu {
    position: fixed;
    top: -9px;
    left: 11%;
    z-index: 10;
}

.menu {
    display: inline-block;
    padding-right: 25px;
    position: relative;
    left: 28%;
}

.link-menu {
    text-decoration: none;
    font-family: 'Crete Round', Helvetica;
    font-size: 180%;
    color: #000;
    border-bottom: 2px solid rgba(0, 0, 0, 0);
    border-radius: 30%;
    transition: border-radius .3s, color .3s;
    padding: 0 0 10px 0;
    line-height: 3em ;
}

.link-menu:hover {
    border-bottom: 2px solid #000;
    border-radius: 10%;
    color: #275d6e;
}
<header>
  <nav role="navegation">
    <ul>
      <li class="menu"><a href="index.html" class="link-menu">Home</a></li>
      <li class="menu"><a href="#" class="link-menu">Sobre Nós</a></li>
      <li class="menu"><a href="#" class="link-menu">Petsitter</a></li>
      <li class="menu"><a href="#" class="link-menu">Dog Walker</a></li>
      <li class="menu"><a href="#" class="link-menu">Contato</a></li>
    </ul>
  </nav>
</header>
    
asked by anonymous 11.06.2015 / 21:37

1 answer

5

Just create a new css class with the changes you want, and assign it to the menu when you scroll.

To identify the scroll: 

<script type="text/javascript">
$(document).on("scroll",function(){
    if($(document).scrollTop()>100){ //QUANDO O SCROLL PASSAR DOS 100px DO TOPO
        $("header").removeClass("large").addClass("small"); //TROCA P CLASSE MENOR
    } else{
        $("header").removeClass("small").addClass("large"); //VOLTA P MENU GRANDE ORIGINAL
    }
});
</script>

Note: The above code needs to jQuery to work.

I hope I have helped.

    
11.06.2015 / 22:08
Capture clipboard in Windows with JAVA PHP - Bank Reconciliation