导航栏初始距离页面上边缘100px，当上下滑动到0px时，导航栏固定在顶端。

导航栏初始距离页面上边缘100px，当上下滑动到0px时，导航栏固定在顶端。这个功能该怎么实现
最好带js代码的详解注释。

$(window).bind("scroll", function(){

    var top = $(this).scrollTop(); // 当前窗口的滚动距离 
            if(top==100px){
                $(.dhl).css=( {'background-color': '#ccc';  'left': '0';  'position': 'fixed';  'top': '0';  'width': '100%';  'z-index': '1000'; } )
            }

});

javascript滚动到导航条时如何固定在顶部