How to fade out and in a Div in a relation with scrolling

How to fade out and in a Div in a relation with scrolling

is there a way where I can make a fixed Div fade out when I Scroll the Page down and fade it in when I scroll back up  for this Website in The link bellow :

this is the link

  1. <div class="BodyContainer"> <p class="Slogo">Live Like You are In Heaven</p> <div class="SubSContain"> <p class="SubSlogo">A Beautiul Life</p> </div>

and this is the CSS :

  1. .BodyContainer { width:100%; display:block; position:fixed; z-index: 1;}

Please help !! I asked may times but no one is answering !