Question

我使用nav-bar创建了一个浮动jquery。

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

我希望它显示为smoothly。

当我向下滚动时，导航栏会立即显示。我想使用jquery将css3过渡应用于它。但我不清楚它是如何做到的。

这是FIDDLE。

有人请帮助我。

Answer 1

滚动时，您想要在导航栏中添加active类。

然后，在您的CSS中有以下内容：

.nav-bar { opacity: 0; transition: opacity 1s ease-in; }

nav-bar .active { opacity: 1; }

Answer 2

看到这个小提琴：

http://jsfiddle.net/FVfnL/3/

nav.css({
         position: 'static',
         height: '85px',
         top: '-100px',
         display: 'none',
       });

Answer 3

或者是你想要的行为，如下所示： 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;
        }
    });

添加CSS3 Transition浮动导航栏 - JQUERY

3 个答案: