Parallax section Scroll

I have a hero full screen bg section image that i want to add the parallax effect to i found this example http://pixelcog.github.io/parallax.js/

how ever its just remains fixed no real scroll movement..

<div id="hero-unit" class="parallax-window" data-parallax="scroll"> 
    <div id="hero-unit-content">
        <h1 class="hero-title">Welcome</h1>
        <p class="hero-subtitle">Click Here Close</p>
        <p><a class="button subdued-button alt-button" role="button" href="#">Learn more</a></p>            
        </div>       
    </div> 



#hero-unit {
    width: 100%;
    height: 100%;
    background: url(../images/backgrounds/bg.jpg) no-repeat top center;
    background-color: #000;
    background-size: cover;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;  
}

#hero-unit-content {
    position: absolute;
    width: 100%;
    bottom: 15%;    

}

#hero-unit-content h1, #hero-unit-content p {
    text-align:center;
    text-transform: uppercase;
}


.hero-title {
    text-shadow:0 2px 2px rgba(0,0,0,0.5);
    color:#bebebe;
    font-weight:300;
    font-size: 60px;
    font-family: 'Oswald', sans-serif;  
}

.hero-subtitle {
    max-width:600px;
    margin:25px auto;
    padding:10px 15px;
    background-image: url(../images/opacity-overlay.png);
    color:#5d6264;  
    font-weight:500;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.1em;
}

Solution

@Amoro I have made one fiddle for you. please check this. I hope your problem is solve in this demo. check this link https://jsfiddle.net/khatrikiran/3rsfaLr5/