Hide divs on certain scroll with scroll to top function

A nice effect to show and hide <div> blocks on certain scroll on page with a sijmple scroll top top function.

by Martin Emanuelsson

HTML

<div class="content1">
  <h1>content1</h1></div>
<div class="content2">
  <h1>content2</h1></div>
<div class="content3">
  <h1>content3</h1></div>
<div class="content4">
  <h1><a href="#">Scroll up again ^</a></h1></div>

<div class="text">
  <p>Start scrolling to se the effect</p>
</div>
<div class="link"><a href="#">Scroll up again ^</a></div>

CSS

body {
  /* Only for demo */
  height: 3200px;
  margin: 0;
  padding: 0;
}

.content1 {
  z-index: 10;
  display: block;
  width: 100%;
  height: 400px;
  background-color: red;
  position: fixed;
}

.content2 {
  z-index: 9;
  display: block;
  width: 100%;
  height: 400px;
  background-color: green;
  position: fixed;
}

.content3 {
  z-index: 8;
  margin: 0 auto;
  display: block;
  width: 100%;
  height: 400px;
  background-color: blue;
  position: fixed;
}

.content4 {
  z-index: 7;
  margin: 0 auto;
  display: block;
  width: 100%;
  height: 400px;
  background-color: white;
  position: fixed;
}

.scrollup {
  top: 0px !important;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out
}

.scrolldown {
  top: -400px !important;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out
}

.text {
  padding-top: 390px;
  position: fixed;
}

.link {
  padding-top: 430px;
  position: fixed;
  display: none;
}

JavaScript

/* fadeOut blocks */

$(window).scroll(function() {
  if ($(this).scrollTop() > 800) {
    $(".content1").removeClass('scrollup').addClass('scrolldown');
    $('.link').fadeIn(); /* Display back top top after scrolling 800px */
  };

});

$(window).scroll(function() {
  if ($(this).scrollTop() > 1600) {
    $(".content2").removeClass('scrollup').addClass('scrolldown');
  }
});

$(window).scroll(function() {
  if ($(this).scrollTop() > 2400) {
    $(".content3").removeClass('scrollup').addClass('scrolldown');
  }
});

/* fadeIn blocks */

$(window).scroll(function() {
  if ($(this).scrollTop() < 800) {
    $('.content1').removeClass('scrolldown').addClass('scrollup');
    $('.link').fadeOut(); /* Hide when 800px remaining */
    return false;
  };
});

$(window).scroll(function() {
  if ($(this).scrollTop() < 1600) {
    $('.content2').removeClass('scrolldown').addClass('scrollup');
    return false;
  }
});

$(window).scroll(function() {
  if ($(this).scrollTop() < 2400) {
    $('.content3').removeClass('scrolldown').addClass('scrollup');
    return false;
  }
});

/* Scroll top topp animation */

$("a").click(function() {
  $("html, body").animate({
    scrollTop: 0
  }, "slow");
  return false;
});