javascript - 添加 CSS3 过渡 float 导航栏 - JQUERY

Question

我使用 jquery 创建了一个 float 的 nav-bar。

当我滚动时，它会立即出现。我不希望它立即出现。

我想让它平滑地显示。

当我向下滚动时，导航栏会立即出现。我想使用 jquery 将 css3 转换应用于它。但我不知道该怎么做。

这是 FIDDLE .

有人请帮助我。

Answer 1

或者是你想要的行为，像这样: http://jsfiddle.net/FVfnL/4/

var nav = $('.main-nav');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $('.scrollbar');
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;

        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                left: '15px',
                transition: 'position,top 1.5s ease 0.1s',
                width: nav.width()
            });
            isFixed = true;
        }
        else if (!shouldBeFixed && isFixed)
        {
            nav.css({
                top: navHomeY,
                transition: 'position,top 1.5s ease 0.1s',
            });
            isFixed = false;
        }
    });