使用 Javascript 滚动时的导航栏淡入淡出动画答案

【问题标题】：Navbar Fade animation in scrolling with Javascript使用 Javascript 滚动时的导航栏淡入淡出动画
【发布时间】：2014-07-03 13:22:09
【问题描述】：

mainMenu 是一个大导航栏，在向下滚动时变得不可见，并被 topMenu 取代，一个小的导航顶部固定栏。

我有一个问题：仅当出现顶部菜单时，替换才会淡出动画。 我怎样才能让顶部菜单在消失的时候也变成淡入淡出的动画？

这是我的 javascript：

<script>
        var mainMenuTop = $('#mainMenu').offset().top;
        var mainMenuBottom = mainMenuTop + 200; 
        $(window).scroll(function() {
            var scrollTop = $(window).scrollTop(); 

            if (scrollTop > mainMenuBottom) {

                if (($("#topMenu").is(":visible") === false)) {

                  $('#topMenu').fadeIn('slow');
                }
            } else {

                if ( $("#topMenu").is(":visible") ) {
                    $('#topMenu').hide();
                }
            }
        });
    </script>

【问题讨论】：

当您说“当它消失时，我怎样才能使它也变成淡入淡出的动画？”时，您指的是哪个元素。 “它”是什么？抱歉，有点不清楚。
对不起，我指的是“topmenu”

标签： javascript scroll fade navbar

【解决方案1】：

我认为您要查找的内容非常简单。而不是这一行：

$('#topMenu').hide();

改成这样：

$('#topMenu').fadeOut('slow');

一个不错的简单 jQuery 动画。详情请见http://api.jquery.com/fadeout/。

希望对您有所帮助。

【讨论】：