position probléme défilement

Bonsoir à tous ,

j'ai un petit soucis concernant le défilement de ma page , j'ai fait deux bloc , le bloc de gauche et le bloc de droite et vu qu'a gauche je n'aurai qu'un seul contenu donc afin d'éviter l'espace comme vous pouvez le voir , je souhaiterai que la partie gauche bouge quand je regarde le contenu de la partie de droite plus bas
mais je n'y arrive pas , j'ai testé en mettant position fixed pour le bloc de gauche mais là la partie de droite vient ce mettre par dessus , voici mon code CSS(désolé si c'est pas top , je suis pas expert du coup je bidouille^^):

body {
    font-family: "Century Gothic";
    background-color: blue;

}

/*NAVBAR*/
.navbar-brand {
    margin-right: 150px;
}

.container ul li{
    margin-right: 35px;
}

/* PRESENTATION*/

#coordonnees{
    color:white;
    width: 500px;
    float: left;
    margin-left:100px;
    margin-top: 150px;

}
#coordonnes article{
    position: fixed;
}

#coordonnees ul li{
    list-style-type: none;
    display: inline-block;
    margin-right: 20px;
}
#experience{
    color:white;
    width: 500px;
    float: left;
    margin-left:100px;
    margin-top: 150px;
}
#experience ul li{
    display: inline-block;
    list-style-type: none;
}