image fade in on scroll

Question

I am trying to recreate something like the effect that is happening on the left, with the logo fade in on the scroll of the page. Seen here http://www.vogue.co.uk/ when you scroll up. I have this, but it's really incorrect i think... SORRY GUYS, EDITED TO ADD HTML AND CSS

var divs = $('.logo-tiny');
$(window).scroll(function(){
   if($(window).scrollTop() <10 ){
         divs.stop(true,true).fadeOut("fast");
   } else {
         divs.stop(true,true).fadeIn("fast");
  }
  });​




<div id="header">
 <div id="logo"></div><div class="header-tiny"><div class="logo-tiny"></div>
  <div class="header-navi"><a class="header-link">link1</a> |<a     class="header-    link"> link2</a> |<a class="header-link"> link10</a></div></div>
</div>

CSS

#header {
    background-color: white;
    width: 100%;
    height: 150px;
    min-height:50px;
    margin:0 0 0 40px ;
    z-index: 1000;
    /*position: fixed;*/
}
#logo {
    background:url(RUNWAYMAGAZINE_LOGO-BK-hdr.png) no-repeat center;
    width: 100%;
    height: 105px;
    margin:10px;

}
.header-tiny {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    height: 25px;
    width:100%;
    padding-top:10px;
      }
.logo-tiny {
    background-color: #000;
    height:25px;
    width:50px;
       }

Answer 1

css

no scroll

visibility:hidden;

and top

visibility:visible;

animate

-webkit-transition-property: all;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease;
-webkit-transition-delay: 0.2s;

Answer 2

Check this out:

var divs = $('.logo-tiny');
$(window).scroll(function(){
   if($(window).scrollTop() <10 ){
       divs.fadeOut("fast");
       console.log('a');
   } else {
        divs.fadeIn("fast");
       console.log('b');
  }
});

working demo: [http://fiddle.jshell.net/D5M9H/]