Menu desplazable

Única página jugando con scroll

by Martin Miranda

HTML

<nav id="menu">
    <ul>
        <a data-enlace="seccion1">
            <li class="enlace" >Inicio</li>
        </a>
         <a data-enlace="seccion2">
            <li class="enlace" >Portfolio</li>
        </a>
         <a data-enlace="seccion3">
            <li class="enlace" >Mapa</li>
        </a>
         <a data-enlace="seccion4">
            <li class="enlace" >Contacto</li>
        </a>
    </ul>
</nav>
<div id="container">
    <div id="seccion1" class="seccion"></div>
    <div id="seccion2" class="seccion"></div>
    <div id="seccion3" class="seccion"></div>
    <div id="seccion4" class="seccion"></div>
</div>

CSS

body,html{
    margin:0 0;
    padding:0 0;
    width:100%;
    height:100%;
    background-color:rgba(200,200,200,.5);
}
*{
    box-sizing:border-box;
}
#menu{
    position:relative;
    top:0;
    width:100%;
    padding:30px 0px;
    background-color:rgba(10,10,10,1);
    z-index:99;
    overflow:hidden;
}
#menu>ul{
    position:relative;
    list-style:none;
    font-family:Arial;
    font-weight:bold;
    color:white;
    margin:0 0;
    padding:0 0;
    text-align:center;
}
#menu>ul>a{
    position:relative;
    text-align:center;
    padding:30px;
}
#menu>ul>a:hover{
    cursor:pointer;
     background-color:rgba(0,100,200,.4);
}
#menu .enlace{
    display:inline-block;
    color:white;
    text-align:center;
}
#container{
    width:100%;
    height:100%;
}
.seccion{
    width:100%;
    height:100%;
    position:relative;
}
#seccion1{
    background-color:orange;
}
#seccion2{
    background-color:green;
}
#seccion3{
    background-color:pink;
}
#seccion4{
    background-color:red;
}

JavaScript

$(document).ready(function(){
    
    $(window).scroll(function(){
        currentPosition = $(window).scrollTop();
        if(currentPosition >= 30){
        $('#menu').css('position','fixed');
        }else if(currentPosition < 30){
        $('#menu').css('position','relative');
        }
    });
    
    $('#menu>ul>a').click(function(){
       selector = $(this).attr('data-enlace');
       posicionSeccion = $('#'+selector).position();
       posicionSeccion = posicionSeccion.top-80;
        $('body,html').animate({
            scrollTop:posicionSeccion+'px'
        },300);
    });
    
    

});