parallax effect

HTML:


<div id="wrapper">
    <nav id="primary">
        <ul>
            <li><a class="about" href="#about">One</a></li>
            <li><a class="BuyKeep" href="#BuyKeep">Two</a></li>
            <li><a class="Rentals" href="#Rentals">Three</a></li>
            <li><a class="WaystoWatch" href="#WaystoWatch">Four</a></li>
        </ul>
    </nav>
    <div id="scroll-animate">
        <div id="scroll-animate-main">
            <div class="wrapper-parallax" id="content">
                <article id="about">
                    <header>
                        <h1>ONE fixed background</h1>
                    </header>
                </article>
                <article id="BuyKeep" class="section">
                    <header>
                        <h1>TWO</h1>
                    </header>
                </article>
                <article id="Rentals" class="section">
                    <header>
                        <h1>THREE</h1>
                    </header>
                </article>
                <article id="WaystoWatch">
                    <header>
                        <h1>FOUR fixed background</h1>
                    </header>
                </article>
            </div>
        </div>
    </div>
</div>


JS:


$(document).ready(function() {

redrawDotNav();
heightsCalculator();

    $(window).bind('scroll',function(e){
    parallaxScroll();
redrawDotNav();
    });
   
  $('a.about').click(function(){
    $('html, body').animate({
    scrollTop:0
    }, 1000, function() {
    parallaxScroll();
});
    return false;
});
    $('a.BuyKeep').click(function(){
    $('html, body').animate({
    scrollTop:$('#BuyKeep').offset().top
    }, 1000, function() {
    parallaxScroll();
});
    return false;
    });
    $('a.Rentals').click(function(){
    $('html, body').animate({
    scrollTop:$('#Rentals').offset().top
    }, 1000, function() {
    parallaxScroll();
});
    return false;
    });
$('a.WaystoWatch').click(function(){
    $('html, body').animate({
    scrollTop:$('body').height()
    }, 1000, function() {
    parallaxScroll();
});
    return false;
    });
   

var lines = function() {
 $('.section').css('height', $(window).height() + 'px');
}
lines();

});

function parallaxScroll(){
var scrolled = $(window).scrollTop();
}

function redrawDotNav(){
var section1Top =  0;
var section2Top =  $('#BuyKeep').offset().top - (($('#Rentals').offset().top - $('#BuyKeep').offset().top) / 2);
var section3Top =  $('#Rentals').offset().top - (($('#WaystoWatch').offset().top - $('#Rentals').offset().top) / 2);
var section4Top =  $('#WaystoWatch').offset().top - (($(document).height() - $('#WaystoWatch').offset().top) / 2);

$('nav#primary a').removeClass('active');

if($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top){
$('nav#primary a.about').addClass('active');
} else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top){
$('nav#primary a.BuyKeep').addClass('active');
} else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top){
$('nav#primary a.Rentals').addClass('active');
} else if ($(document).scrollTop() >= section4Top){
$('nav#primary a.WaystoWatch').addClass('active');
}

}





function scrollFooter(scrollY, heightFooter) {

    if(scrollY >= heightFooter) {
      $('#WaystoWatch').css({
          'bottom' : '0px'
      });
    }
    else {
      $('#WaystoWatch').css({
          'bottom' : '-' + heightFooter + 'px'
      });
    }
}



function heightsCalculator(){

   var windowHeight = $(window).height(),
        footerHeight = $('#WaystoWatch').height(),
        heightDocument = (windowHeight) + ($('#BuyKeep').height()) + ($('#Rentals').height()) + ($('#WaystoWatch').height()) - 0;

        $('#scroll-animate, #scroll-animate-main').css({
       'height' :  heightDocument + 'px'
   });
   $('#about').css({
       'height' : windowHeight + 'px'
   });
   $('.wrapper-parallax').css({
       'margin-top' : windowHeight + 'px'
   });

   scrollFooter(window.scrollY, footerHeight);

window.onscroll = function(){
        var scroll = window.scrollY;

        $('#scroll-animate-main').css({
            'top' : '-' + scroll + 'px'
        });
       
        $('#about').css({
            'background-position-y' : 50 - (scroll * 100 / heightDocument) + '%'
        });

        scrollFooter(scroll, footerHeight);

   }
  }




  $(window).resize(function () {
  lines();
scrollFooter();
heightsCalculator();

  });



CSS:


#scroll-animate{
  overflow: hidden;
}
#scroll-animate-main{
  width: 100%;
  left: 0;
  position: fixed;
}
.wrapper-parallax {
  margin-top: 100%;
  margin-bottom: 300px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
#about ,
#BuyKeep,
#Rentals,
#WaystoWatch {
    height: 1000px;
    min-height: 1000px;
    background: #ededed;
    position: relative;
    z-index: 1;
}
#about {
    width: 100%;
    height: 100%;
    top: 0;
    position: fixed;
    z-index: -1;
}

.wrapper-parallax h1 {
    margin: 0 0 25px 0;
    font-size: 60px;
    font-family: Georgia, serif;
    font-weight: normal;
    line-height: 65px;
}
#WaystoWatch {
    width: 100%;
    height: 300px;
    background: gray;
    bottom: -300px;
    position: fixed;
    z-index: -1;
}

#about,
#WaystoWatch,
#scroll-animate-main{
transition-duration: 0.4s;
transition-property: all;
transition-timing-function: cubic-bezier(0, 0, 0, 1);
}



nav#primary {
z-index: 5;
position: fixed;
top: 50%;
right: 16px;
margin-top: -40px;
}
nav#primary li {
position: relative;
 }
nav#primary li a{color:black;}

nav#primary li a.active{color:red;}