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

Question

I wanted to do something like this mentioned here , so I used the following jsfidlle (that works pretty fine) to create my own http://jsfiddle.net/a2q7zk0m/1/ , 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!

Answer 1

Replace this line:

$el = document.getElementById('temp');

with this:

$el = $('#temp');

JSFiddle

---

Or wrap the $el into jQuery object:

$el = document.getElementById('temp');
// ...
$($el).removeClass("fixedNav");

JSFiddle

---

Also, You should move $el declaration outside of the $(window).scroll method (so that the element isn't searched in DOM while scrolling)

$(document).ready(function(){
    var $el = $('#temp');
    $(window).scroll(function (e){
        if ($(this).scrollTop() >= 100 && !$el.hasClass("fixedNav")) {
            $el.addClass("fixedNav");
        }else if($(this).scrollTop() < 100 && $el.hasClass("fixedNav")){
            $el.removeClass("fixedNav");
        }
    });
});