具有不同大小徽標的自舉動畫導航欄

Question

我正在嘗試使用自舉導航欄進行動畫製作。當頁面加載時，您會看到完整尺寸的徽標，而當您向下滾動時，導航欄的大小會減小，並且較小的徽標會消失。有這麼遠，但我遇到了一個小故障，最終可能會同時顯示兩個徽標如果你向下滾動一下，然後快速向上滾動。所以我正在尋找一種最好的方法來確保在任何時候只有一個標誌。這裏是我的jQuery：

var header_closed = false; 
var header_open = true; 
var timer; 

$(window).scroll(function() { 
    if (timer) { 
     window.clearTimeout(timer); 
    } 
    timer = window.setTimeout(function() { 
     if ($(document).scrollTop() > 20 && header_closed === false) { 
      header_closed = true; 
      header_open = false; 
      $('.biglogo').fadeOut("fast", function() { 
       $('.navbar-header').animate({ 
        height: "54px" 
       }, 250, function() { 
        $('.smllogo').fadeIn(500); 

       }); 
      }); 


     } else if ($(document).scrollTop() < 20 && header_open === false) { 
      header_open = true; 
      header_closed = false; 
      $('.smllogo').fadeOut(500, function() { 
       $('.navbar-header').animate({ 
        height: "138px" 
       }, 250, function() { 
        $('.biglogo').fadeIn('fast'); 
       }); 
      }); 
     } 
    }, 200); 
}); 

的HTML是隻是一個正常的引導固定有兩個導航欄品牌（小標誌具有顯示導航欄：隱藏;從視圖中隱藏它的負載..任何想法

Answer 1

你可以在動畫過程中更改img源嗎？這將意味着他們永遠都不會被顯示：

if ($(document).scrollTop() > 20 && header_closed === false) { 
      header_closed = true; 
      header_open = false; 
      $('.logo').fadeOut("fast", function() { 
       $('.navbar-header').animate({ 
        height: "54px" 
       }, 250, function() { 
        $('.logo').attr('src','small.jpg'); 
        $('.logo').fadeIn(500); 

       }); 
      }); 
} else if ($(document).scrollTop() < 20 && header_open === false) { 
      header_open = true; 
      header_closed = false; 
      $('.logo').fadeOut(500, function() { 
       $('.navbar-header').animate({ 
        height: "138px" 
       }, 250, function() { 
        $('.logo').attr('src','big.jpg'); 
        $('.logo').fadeIn('fast'); 
       }); 
      }); 
     } 
    }, 200); 

Answer 2

最近我在我的項目之一同樣的事情，你可能有一個快看這裏：http://musichighcourt.com/soundcloudapp

我分享的jQuery代碼，我已經使用了相同的CSS

HTML

<header> 
     <div id="logo"><img src="img/logo.png" class="logo img-responsive"></div> 
     <div id="nav" class="menu"> 
      <ul> 
       <li><a href="#home">Home</a></li> 
       <li><a href="#features">Features</a></li> 
       <li><a href="http://musichighcourt.com/soundcloudapp/top-charts.php">Top Charts</a></li> 
       <li><a href="#">Tips</a></li> 
       <li><a href="#">Support</a></li> 
       <li><a href="user_login.php">Login|Signup</a></li> 
      </ul> 
     </div> 
    </header> 

的jQuery：

$(window).scroll(function() { 
    if ($(this).scrollTop() > 100){ 
     $('header').addClass("sticky"); 
     $('#nav').addClass("sticky-menu"); 
     $('#logo').children('img').addClass("sticky-logo"); 
    } 
    else{ 
     $('header').removeClass("sticky"); 
     $('#nav').removeClass("sticky-menu"); 
     $('#logo').children('img').removeClass("sticky-logo"); 
    } 
}); 

更改根據您的方便，在此行滾動的價值：($(this).scrollTop() > 100)

CSS

/*header */ 
header{ 
    position: fixed; 
    width:100%; 
    height:70px; 
    font-size:16px; 
    text-transform:uppercase; 
    font-family:'ubuntu' , sans-serif; 
    transition:.5s; 
    z-index:1000; 
} 

.sticky { 
    font-size:14p; 
    height: 50px; 
    background: #171515; 
} 

#logo{ 
    float:left; 
} 

.logo{ 
    height:50px; 
    margin-top:10px; 
    margin-top:10px; 
    margin-left:30px; 
    transition:.3s; 
} 

.sticky-logo{ 
    margin:0px; 
    padding:2px; 
} 

/* menu */ 

.menu{ 
    padding:24px; 
    float:right; 
    transition:.3s; 
} 

.sticky-menu{ 
    padding-top:14px; 
    padding-bottom:14px; 
    padding-right:0px; 
} 

#nav ul { 
    list-style-type: none; 
} 

#nav ul li{ 
    margin-right:20px; 
    display:inline; 
} 

#nav ul li a{ 
    text-decoration:none; 
    color:#fff; 
} 

讓我KN如果這有幫助的話。 謝謝