Question

我正在尝试重新创建类似于左侧发生的效果，页面滚动上的徽标淡入。向上滚动时看到此处http://www.vogue.co.uk/。我有这个，但我认为它真的不正确... SORRY GUYS，编辑添加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;

Answer 2

检查出来：

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

工作演示：[http://fiddle.jshell.net/D5M9H/]

图像淡入滚动

2 个答案: