<div class="menu">
  <ul>
    <li><a target="landing">landing</a></li>
    <li><a target="suzy">suzy</a></li>
    <li><a target="night">night</a></li>
    <li><a target="park">park</a></li>
  </ul>
</div>
<div class="main">
  <div id="landing">
    <h1>This is your first div</h1>
  </div>
  <div id="suzy">
    <h1>This is your second div<br>And you see that from the background</h1>
    <div id="expander"><h2>Click me to expand this div!</h2></div>
  </div>
  <div id="night">
    <h1>Three is the magic number<br>Yes it is</h1>
  </div>
  <div id="park">
    <h1>And maybe also<br>FIFTISHEEEEEEEENNN</h1>
  </div>
</div>

/*JUST STYLE....*/

/*MENU*/
.menu {
    font-family:Raleway;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
    background: #53346D;
    transition: all .3s;
    text-align:center;
}
.menu ul{
    padding:0;
    list-style-type: none;
    display: inline-block;
    margin:0;
}
.menu ul li{
    display:inline-block;
    font-size:1.1em;
}
.menu ul li a{
    display:block;
    padding:20px 20px;
    color: #fdfdfd;
    text-transform: uppercase;
    cursor:pointer;
    border-bottom:3px solid transparent;
    transition: all.3s;
}
.menu ul li a:hover,.menu ul li a.active{
    text-decoration:none;
}
.menu ul li a:focus{
    outline: 0!important;
    text-decoration:none;
}
.menu ul li a.active{
    border-color:#fafafa;
}

/*DIVS*/
.main{padding-top:45px;text-align:center;}

h1{color:#fafafa;position:absolute;top:30%;left:50%;transform:translateX(-50%); font-family:Galada;font-weight:400;font-size:3em;}

.main div{position:relative}

#landing{
    min-height:100vh;
background: #00d2ff; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #00d2ff , #928DAB); 
background: linear-gradient(to left, #00d2ff , #928DAB);      
}
#suzy{
  min-height:120vh;
background: #B24592; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #B24592 , #F15F79); 
background: linear-gradient(to left, #B24592 , #F15F79);
  transition:all.5s;
}
#suzy.aug{min-height:240vh;}
#night{
  min-height:180vh;
background: #2c3e50; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #2c3e50 , #3498db); 
background: linear-gradient(to left, #2c3e50 , #3498db); 
}
#park{
  min-height:150vh;
background: #AAFFA9; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #AAFFA9 , #11FFBD);
background: linear-gradient(to left, #AAFFA9 , #11FFBD);
}

#expander{
  background: #fafafa;
  padding:20x;
  cursor:pointer;
  position:relative;
  display:inline-block;
  margin-top:30px;
}

#expander h2{
  color:#B24592;
  font-family:Raleway;
  
}

//MENU SCROLL
$(".menu a").click(function() {
  //on click, we get the target value of the selected element
  var target = $(this).attr('target');
  //we then scroll our body until the top of the corresponding div in 700ms
  var mh=$('.menu').height();
  $('body').animate({scrollTop: $("#" + target).offset().top-mh}, 700);
});

//SCROLLSPY                
function scrollSpy(){
  var mh=$('.menu').height();
  $('#landing').css("padding-top",mh+"px");
  
  $(".menu a").removeClass("active"); //we remove active from every menu element

  //we get the divs offsets looping the menu links and getting the targets (this is dynamic: when we change div #suzy's height, code won't break!)
  var divs = [];
  $(".menu a").each(function(i) {
    var appo = $(this).attr("target");
    //here we get the distance from top of each div
    divs[i] = $("#" + appo).offset().top;
  });

  //gets actual scroll and adds window height/2 to change the active menu voice when the lower div reaches half of screen (it can be changed)
  var pos = $(window).scrollTop();
  var off = ($(window).height()) / 2;

  pos = pos + off;

  //we parse our "div distances from top" object (divs) until we find a div which is further from top than the actual scroll position(+ of course window height/2). When we find it, we assign "active" class to the Nth menu voice which is corresponding to the last div closer to the top than the actual scroll -> trick is looping from index=0 while Nth css numeration starts from 1, so when the index=3 (fourth div) breaks our cycly, we give active to the third element in menu.
  var index = 0;

  for (index = 0; index < divs.length; index++) {
    if (pos < divs[index]) {
      break;
    }
  }
  index--;
  $(".menu li:eq(" + index + ") a").addClass("active");
};

$(window).scroll(function() {
  scrollSpy();
});
$(document).ready(function() {
  scrollSpy();
});

//suzy div height click
$('#expander').click(function(){
  $("#suzy").toggleClass('aug');
});