向下滚动时自动隐藏固定的页眉菜单，向上滚动时自动显示

今天分享一段本站用来自动隐藏、自动显示固定页眉菜单的 javascript 代码。这段代码比现有的其他方法更可靠。

稳健的自动隐藏、自动显示效果

我更倾向于使用 fadeOut() 和 fadeIn() 效果，因为 fade 动画可以在执行过程中被停止（或暂停）。页面向下滚动时，页眉菜单淡出；页面向上滚动时，页眉菜单淡入。如果页眉菜单正在淡出时页面又向上滚动，菜单会立刻改为淡入；同样，如果页眉菜单正在淡入时页面又向下滚动，菜单会立刻改为淡出。

Javascript 代码

<script type="text/javascript">
if (location.pathname !== "/") {
    var scroll_auto_hide_sticky_menu = function() {
        if (window.jQuery) {
            var lastScrollTop = jQuery(window).scrollTop();
            var prevfade = 0;
            jQuery(window).scroll(function() {
                var st = jQuery(window).scrollTop();
                var delta = st - lastScrollTop;
                if (st >= 20 && delta > 20) {
                    lastScrollTop = st;
                    if (prevfade === 0) {
                        jQuery('nav.navbar:not(.navbar-transparent)').stop().fadeOut('normal');
                    } else {/*jQuery('nav.navbar:not(.navbar-transparent)').fadeOut('normal');*/
                    }
                    prevfade = 1;
                } else if (st < 20 || delta < -20) {
                    lastScrollTop = st;
                    if (prevfade === 1) {
                        jQuery('nav.navbar:not(.navbar-transparent)').stop().fadeIn('normal');
                    } else {/*jQuery('nav.navbar:not(.navbar-transparent)').fadeIn('normal');*/
                    }
                    prevfade = 0;
                }
            });
        }
    };
    window.addEventListener('DOMContentLoaded', scroll_auto_hide_sticky_menu);
}
</script>

说明

本站用 jQuery 来查找页眉菜单的实例。在你自己的网站上使用时，请修改这段代码。

jQuery('nav.navbar:not(.navbar-transparent)')

首页的页眉菜单始终显示。若想让所有页面的页眉菜单都自动隐藏，请删掉这个 if。

if (location.pathname !== "/")