Question

I have following code in my WordPress:

(function ($) {
  var $header = $("div.header");

  $(window).bind("scroll resize", function () {
    if ($(window).scrollTop() > 30) {
      $("div.header").stop().animate({
        'opacity': 0.24
      }, {
        duration: 1000
      });
    } else {
      $header.stop().animate({
        'opacity': 1
      }, {
        duration: 1000
      });
    }
  });
})(jQuery);

If statement kicks in when supposed but else never…

BUT

If I enclose it with:

jQuery(document).ready(function($) {        
  // code here
});

It’s all fine. Why?

Thank you

Answer 1

May be you’re trying to use jQuery when dom in not build. Try to use $(document).ready function:

(function ($) {
  $(document).ready(function () {
    $header = $("div.header");
    $header.remove();
  });
})(jQuery);

About what you have mantioned in the question:

jQuery(document).ready(function ($) {
  // code
});

It works because it do the same thing: it binds event handler on ready event and pass jQuery object as a parameter to the function as $.

Now what you did before:

(function ($) {
  $header = $("div.header");
  $header.remove();
})(jQuery);

Here you just declare anonymous function with named $ parameter:

function ($) {
}

And call it with jQuery object as a parameter, which will be available in the function as $:

(function ($) {
})(jQuery);