当我开始滚动时，渐变一个div

Question

我有一个固定的标题，当我开始滚动标题改变其高度并删除徽标。我想做的是有标志淡出而不是只是消失。我怎样才能达到这个效果呢?

为了测试的目的，我无法在jsfiddle中显示我的徽标，因为它是一个自定义字体，所以我将使用#mainlogo作为我的例子。这是我的代码http://jsfiddle.net/Bx4rq/9/

JS

 $(window).scroll(function() {
        if ($(this).scrollTop() > 30){  
  $('#headerWrapper, .icon-lkbl, #mainLogo, .nav-collapse').addClass("sticky");
      }
        else{
  $('#headerWrapper, .icon-lkbl, #mainLogo, .nav-collapse').removeClass("sticky");
 }
 });

CSS

 #headerWrapper.sticky { height: 48px; }
 .icon-lkbl.sticky,  #mainLogo.sticky { display:none;}
 .nav-collapse.sticky{ margin-top:-10px;}

HTML

  <div id="headerWrapper">
        <header>
              <a href="#" rel="home">
                    <div class="iconMain icon-lkbl"></div>
                    <h1 id="mainLogo">Logo <strong>Test</strong></h1>
              </a>
  <nav id="mainNav" class="nav-collapse">
        <ul>
              <li><a href="about.html">About</a></li>
              <li><a href="recipes.html">Recipes</a></li>
              <li><a href="garden.html">Garden</a></li>
              <li><a href="contact.html">Contact</a></li>
              <li><a href="#" rel="popuprel" class="iconMain icon-search search popup">       <span>Search</span></a></li>
        </ul>
  </nav>
  <div class="popupbox" id="popuprel">
        <div id="searchPanel">
              <h2><span>Find your</span> next meal</h2>
        </div>
  </div>
  <div id="fade"></div>
  </header>
  </div> <!-- END HEADER WRAPPER -->

Answer 1

使用display: none代替显示和隐藏

你可以使用jquery，淡出和淡出。

$(window).scroll(function () {
    if ($(this).scrollTop() > 30) {
        $('#headerWrapper, .icon-lkbl, #mainLogo, .nav-collapse').addClass("sticky");
        $('.icon-lkbl, #mainLogo').fadeOut();
    }
    else {
        $('#headerWrapper, .icon-lkbl, #mainLogo, .nav-collapse').removeClass("sticky");
        $('.icon-lkbl, #mainLogo').fadeIn();
    }
});

渐显文档