How do you make a DIV disappear on scroll and appear when scroll back to the top of the page

Question

I need to create a site for a school project. Doesn't have to be anything special but I want to include some nice effects. I want to make the '#boxje' dissapear when you scroll down but reappear when you're back at the top. I've tried to do it with Javascript but I couldn't really get any further than making it disappear after x amount of seconds.

<div id="boxje" class="col-md-4 col-md-offset-4 inner col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3">
    <div class="text-box">
        <p class="intro">Welkom</p>
        <h2><img src="images/van-hool-logo.png" height="60px" ></h2>
        <p>Van Hool uit België bouwt jaarlijks tot 1400 bussen en autocars en zo’n 4000 industriële voertuigen waarvan het 80% wereldwijd exporteert. 
          Met meer dan 4000 werknemers en een compleet gamma autocars en bussen is Van Hool een belangrijke busbouwer in Europa.Daarnaast bouwt Van 
          Hool ook een zeer uitgebreid gamma opleggers en tankcontainers. Van Hool is in deze sector onbetwist marktleider in België en bekleedt een 
          belangrijke plaats op verschillende exportmarkten.<br>

          Al meer dan 65 jaar is Van Hool gerenommeerd voor het ontwerpen en bouwen van op maat gemaakte hoogtechnologische kwaliteitsproducten.</p>
         <br>
         <br>
     </div>
</div>

Answer 1

I did a similar thing here on the menu : www.procapital.fr with a background on the header that appear when you scroll.

The jquery add a class when you have scroll 300px.

CSS :

 #header{
        background: rgba(1,90,156,0);
        moz-transition: all 1s ease-in-out;
        o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
        webkit-transition: all 1s ease-in-out;
    }
    #header.active{
        background: rgba(1,90,156,0.8);
    } 

Javascript :

$window = $(window);
$(window).scroll(function(){

if($window.scrollTop() > 300)
    $("#header").addClass('active');
else    
    $("#header").removeClass('active');
});

Just invert when you add or remove the class and you will be good :)

This should work :

 #boxje{
        background: rgba(1,90,156,0);
        moz-transition: all 1s ease-in-out;
        o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
        webkit-transition: all 1s ease-in-out;
    }
    #boxje.active{
        background: rgba(1,90,156,0.8);
    } 

Javascript :

$window = $(window);
$(window).scroll(function(){

if($window.scrollTop() > 300)
    $("#boxje").removeClass('active');
else    
    $("#boxje").addClass('active');
});

Answer 2

$(window).scroll(function(){
  var boxje = $("#boxje").offset().top;
  var value = 160;
    if (boxje>value) {
      $("#boxje").css({"display":"none"});
    } else {
      $("#boxje").css({"display":"initial"});
    }
});

instruction :

1. include jquery to your project from google cdn or download for offilne include:

   https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js

2. add my JQUERY CODE to some file.js

3. import this file too in your html/php file

4. play with "value = 160" in my code to suit your preference.