视线滚动与位置粘不一起工作

Question

有3个div， 顶吧 2.滑块 3.导航

我在导航时使用下面的code实现了视差滚动。

<script>   
    $.fn.moveIt = function(){
        var $window = $(window);
        var instances = [];

        $(this).each(function(){
            instances.push(new moveItItem($(this)));
        });

        window.onscroll = function(){
            var scrollTop = $window.scrollTop();
            instances.forEach(function(inst){
                inst.update(scrollTop);
            });
        }
    }

    var moveItItem = function(el){
        this.el = $(el);
        this.speed = parseInt(this.el.attr('data-scroll-speed'));
    };

    moveItItem.prototype.update = function(scrollTop){
        var pos = scrollTop / this.speed;
        this.el.css('transform', 'translateY(' + -pos + 'px)');
    };

    $(function(){
        $('[data-scroll-speed]').moveIt();
    });
</script>

脚本工作正常，但我想从顶部滚动到顶部30pixels时顶部导航，所以我实现了下面的CSS。

nav{
    position: -webkit-sticky;
    position: sticky;
    top: 30px;
}

这两个代码一起工作，可能是一个职位问题，我想让这两个工作在一起，任何建议请。