動畫在導航條上的導航條上

Question

嗨我試圖實現這個導航欄效果：http://kettlenyc.com/，這樣當我向下滾動導航欄並將動畫轉換爲固定位置時。我已經開始在這裏的代碼，但不能讓動畫工作：http://theturning.co.uk/NOAH/

我的Jquery看起來像這樣的時刻：

$(function() { 
var bar = $('#topbar'); 
var top = bar.css('top'); 
$(window).scroll(function() { 

    if($(this).scrollTop() > 0) { 
     bar.stop().css({'position' : 'absolute'}); 
    } 

    if($(this).scrollTop() > 600) { 
     bar.stop().animate({'top' : '0px'}, 100).css({'position' : 'fixed'}); 
    } else { 
     bar.stop().animate({'top' : top}, 100); 
    } 
}); 
}); 

和CSS：

#topbar { 
background: url('../images/bg-topbar.png') left top; 
position: absolute; 
top: 0; 
width: 100%; 
height: 50px; 
z-index: 999; 
padding: 20px 0 20px 0; 
} 

任何幫助將不勝感激！由於

Answer 1

你也應該動畫的高度和/或不透明性（比如，高度爲0px到50px，和不透明度從0到1）。另外，我建議在.animate之前將.css({'position':固定爲})。

bar.stop().css({ 
    'position': 'fixed' 
}).animate({ 
    'top': '0px', 
    'height': '50px', 
    'opacity': '1' 
}, 100); 

記住（使用CSS）的高度和透明度都設置爲0。 在你的腳本：

$(function() { 
    var bar = $('#topbar'); 
    var top = bar.css('top'); 
    $(window).scroll(function() { 

     if ($(this).scrollTop() > 0) { 
      bar.stop().css({ 
       'position': 'absolute' 
      }); 
     } 

     if ($(this).scrollTop() > 600) { 
      bar.stop().css({ 
       'position': 'fixed' 
      }).animate({ 
       'top': '0px', 
        'height': '50px', 
        'opacity': '1' 
      }, 100); 
     } else { 
      bar.stop().css({ 
       'position': 'fixed' 
      }).animate({ 
       'top': top, 
        'height': '0', 
        'opacity': '0' 
      }, 100); 
     } 
    }); 
}); 

而CSS必須包括

#topbar { 
    height: 0; 
    opacity: 0; 
} 

Answer 2

這裏很簡單是我的小提琴：http://jsfiddle.net/hgpd8/4/

您檢測窗口滾動的位置，如果其更大比標題的位置，然後設置標題固定。或者從一開始就用CSS修復它，但那不是很酷。

增加了一些效果，但工作：

if ($("#header").is('*')) { 
var elem = $('#header'); 
var offset = elem.offset(); 
var leftValue = offset.left; 
var topValue = offset.top + elem.height(); 
var width = elem.width(); 
$(window).scroll(function (event) { 
var y = $(this).scrollTop(); 
if (y >= topValue) { 
if ($('#header').hasClass('fixed')){  
}else{ 
    $('#header').addClass('fixed'); 
    $('#header').css({ 
     top: '-60px', 
     width:width, 
    }); 
    $('#header').animate({ 
    top: '0', 
}, 500, function() {  
     }); 
} 
} else {  
if ($('#header').hasClass('fixed')){   
$('#header').removeClass('fixed'); 
$('#header').fadeOut('fast', function(){ 
$('#header').fadeIn('fast'); 
}); 
    } 
    } 
    }); 
}