滚动时导航栏中的动画

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）。另外，我建议将.css({'position':fixed}) 放在.animate 之前。

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');
});
    }
    }
  });
}