jQuery 모바일 브라우저 하단 플로팅 메뉴

이전 포스팅 jQuery 모바일 브라우저 상단 플로팅 메뉴에 이어서 이번엔 모바일 브라우저 하단 플로팅 메뉴이다. 상단 플로팅 메뉴와 같이 모바일 브라우저에서 화면 하단에 항상 메뉴가 표시되도록 하는 것이다. css와 html 문서 코드는 이전 상단 플로팅 메뉴 포스트를 참고하면 된다. 다른 것은 생략하고 js 코드만 첨부한다.

(function($) {
    $.fn.bottomFloatMenu = function(timeout, duration, interval, count)
    {
        var cfg = {
                timeout: 200,
                duration: 300,
                interval: 500,
                count: 5
            };

        if(typeof timeout == "object") {
            cfg = $.extend( cfg, timeout);
        } else {
            if(timeout) {
                cfg = $.extend({ timeout: timeout });
            }

            if(duration) {
                cfg = $.extend({ duration: duration });
            }

            if(interval) {
                cfg = $.extend({ interval: interval });
            }

            if(count) {
                cfg = $.extend({ count: count });
            }
        }

        var $menu = this;
        var scroll_y = 0;
        var origin_y = 0;
        var element_y = 0;
        var timeout = null;
        var interval = null;
        var height = parseInt($menu.height());
        var w_height = 0;
        var interval_count = 0;

        function init_menu()
        {
            hide_menu();

            timeout = setTimeout(function() {
                scroll_y = $(window).scrollTop();
                w_height = $(window).height();
                element_y = scroll_y + w_height;
                $menu.css("top", element_y+"px").css("display", "block");
                $menu.clearQueue().stop().animate({ top: "-="+height }, cfg.duration);
            }, cfg.timeout);
        }

        function float_menu()
        {
            hide_menu();

            origin_y = $(window).scrollTop();

            timeout = setTimeout(function() {
                scroll_y = $(window).scrollTop();

                if(origin_y == scroll_y) {
                    w_height = $(window).height();
                    element_y = scroll_y + w_height;

                    if (/iP(hone|od|ad)/.test(navigator.platform)) {
                        if(window.innerHeight - $(window).outerHeight(true) > 0)
                            element_y += (window.innerHeight - $(window).outerHeight(true));
                    }

                    $menu.height(0).css("top", element_y+"px").css("display", "block");
                    $menu.animate({
                        top: "-="+height,
                        height: "+="+height
                    }, cfg.duration);
                }
            }, cfg.timeout);
        }

        function hide_menu()
        {
            $menu.css("display", "none").css("top", (w_height + height)+"px").clearQueue().stop();

            clearTimeout(timeout);
            clearInterval(interval);

            interval_count = 0;
            interval = setInterval(check_menu, cfg.interval);
        }

        function check_menu()
        {
            clearTimeout(timeout);

            if(interval_count == parseInt(cfg.count)) {
                clearInterval(interval);
                interval_count = 0;
                return;
            } else {
                interval_count++;
            }

            origin_y = $(window).scrollTop();

            timeout = setTimeout(function() {
                scroll_y = $(window).scrollTop();

                if(origin_y == scroll_y) {
                    w_height = $(window).height();
                    element_y = parseInt($menu.css("top"));

                    var h = 0;
                    if (/iP(hone|od|ad)/.test(navigator.platform)) {
                        if(window.innerHeight - $(window).outerHeight(true) > 0)
                            h = window.innerHeight - $(window).outerHeight(true);
                    }

                    if(!$menu.is(":animated") && ($menu.is(":hidden") || element_y != (scroll_y + w_height + h - height))) {
                        float_menu();
                    }
                }
            }, cfg.timeout);
        }

        $(window).on("scroll",function(event) {
            float_menu();
        });

        $(window).on("load", function(event) {
            init_menu();
        });

        $(window).on("resize", function(event) {
            if(origin_y != scroll_y)
                float_menu();
        });

        document.addEventListener('touchmove', function(event) {
            hide_menu();
        }, false);
    }
}(jQuery));

실행은 $(“#bottomFloatMenu”).bottomFloatMenu(); 와 같이 코드를 추가해주면 된다. 위의 코드 역시 많은 기기에서 테스트를 해본 것은 아니기 때문에 오류가 있을 수는 있다. 한가지 아쉬운 점이라면 scroll 이벤트가 시작될 때 메뉴를 숨기고 이벤트가 끝나면 메뉴를 보이도록 하는 것인데 아직은 제대로 해결이 안되고 있다. iOS에서는 scroll 이벤트가 끝나야 스크립트가 실행되기 때문에 현재로써는 해결 방법을 찾지 못하고 있다.