it doesn't work to move when I scroll down on iphone only

Question

I want to stop menu-bar when menu-bar come to TOP on iphone. it works to stop menu-bar at top position, but when back scrolling, it doesn't work smoothly. menu-bar stay top position for a moment.(Android works to move both) What should I do?

thank you.

this is CSS

.fixed {
        position: fixed;
        top: 0;
        width:100%;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

this is JS

$(function() {
        var nav = $('.menu-bar');
        var offsetTop = nav.offset().top;
        var floatMenu = function() {
            var $scrollTop = $(window).scrollTop();
                if ($scrollTop >= offsetTop) {
                    nav.addClass('fixed');
                } else {
                    nav.removeClass('fixed');
                }
        }
        $(window).scroll(floatMenu);
        $('body').bind('touchmove', floatMenu);
    });

enter image description here enter image description here