在滚动的导航条动画 [英] Animate in Nav bar on scroll

问题描述

您好，我试图实现此导航栏效果： http://kettlenyc.com/ ，以便当我向下滚动导航栏，然后动画进入固定位置。我已经开始在这里编码，但不能得到动画工作： http://theturning.co。 uk / NOAH /

Hi I am trying to achieve this nav bar effect: http://kettlenyc.com/ so that when I scroll down the nav bar follows and animates into a fixed position. I have started to code it here, but can't get the animate to work: http://theturning.co.uk/NOAH/

我现在的Jquery看起来像这样：

My Jquery looks like this at the moment:

$(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;
}

任何帮助将不胜感激！感谢

Any help would be appreciated! Thanks

推荐答案

您还应该动画高度和/或不透明度（例如，高度从 / code>到 50px 和不透明度 0 到 1 ）。此外，我建议将 .css（{'position'：固定}） c> .animate 。

You should also animate the height and/or the opacity (say, height from 0px to 50px, and opacity from 0 to 1). Also, I would recommend putting the .css({'position':fixed}) before the .animate.

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

并记住设置（使用CSS）高度和不透明度都 0 。
在您的脚本中：

And remember to set (using CSS) the height and opacity both to 0. In your script:

$(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;
}

这篇关于在滚动的导航条动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！