How to leave Menu bar from the middle of the page on top while scrolling?

I wanted to do something like this mentioned here, so I used the following jsfidlle (that works pretty fine) to create my own http://ift.tt/1DnTvr7, but with the custom menu included. Now it doesn't work, I guess it's probably because of the error in javascript:

$(document).ready(function(){
             $(window).scroll(function (e) {
                    $el = document.getElementById('temp');
                    if ($(this).scrollTop() > 100) {
                        $el.addClass("fixedNav");
                    }else {
                        $el.removeClass("fixedNav");
                    }
                });
             });

that does not recognize the ID of the div and request the class from css, but unfortunately I cannot use class attribute here. Could you help me guys with solving that issue? Thanks!