javascript - 图像在滚动中淡入

Question

我正在尝试重新创建类似左侧效果的效果， Logo 在页面滚动时淡入。在这里看到http://www.vogue.co.uk/当你向上滚动时。 我有这个，但我认为它真的不正确......抱歉，伙计们，编辑添加 HTML 和 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

没有滚动

visibility:hidden;

和顶部

visibility:visible;

动画

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