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':固定})放在.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');
});
    }
    }
  });
}

在滚动条中导航栏中的动画

2 个答案: