Changing CSS with jQuery not working

Question

I wrote a script to change several CSS div properties. I tried 2 methods that I found on google, but none of them work. I read the examples carefully, and I don’t know why this will not work.

When there is #rightsectionless content, then #leftsectionthere are images, and #rightsection- at the bottom #contentpage. But if there is #rightsectiontoo much content, the content overflows. So I want to go to position:absoluteuntil position:staticwhen scrolling is detected during overflow.

I am not very good at jQuery, so I hope one of you finds out the answer. If anyone knows, I would appreciate it.

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }

    //Method 1
    if($("#rightsection").hasScrollBar()){
        $('.rightsection1').css({
            "position":"static",
            "margin":"-75px 0 0 150px"
        });
    }

    //Method 2
    if($("#rightsection").hasScrollBar()){
        $('#rightsection').addClass("rightsection1");
        $('#rightsection').removeClass("rightsection2");
    }
})(jQuery);

Jsfiddle

Decision

I changed (function($)to $(document).ready(function(), and now it works flawlessly.

Answer 1

(function($) $(document).ready(function(), .

Answer 2

: , , , (function($) $(document).ready(function(), , .

(function($) { ... })(jQuery); $. noConflict mode, $ .

, $(document).ready(function() { ... }); ( $(function() { ... });, ) jQuery.

, - :

  (function($) {
    $(function() { 
      ...
      // your codes here
      ...
    });
   })(jQuery);