Decrease fixed menu as you scroll the page

Asked

Viewed 6,096 times

3

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

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>

javascript css css3

  • Add a class to an item above the menu (it might even be body) via javascript and style in css.

  • You can also use Bootstrap: http://getbootstrap.com/components/#navbar

1 answer

5


Just create a new css class with the changes you want, and assign to the menu when you listen to the 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 the jQuery to work.

I hope I’ve helped.

Browser other questions tagged javascript css css3

You are not signed in. Login or sign up in order to post.