Изменение CSS с JQuery не работает

Question

Я написал сценарий для изменения нескольких свойств CSS div. Я пробовал 2 метода, которые я нашел в google, но ни один из них не работает. Я тщательно прочитал примеры, и я не знаю, почему это не сработает.

Когда есть меньше, содержание в #rightsection, то есть изображения в #leftsection, то #rightsection прикрепляется к нижней части #contentpage. Но если в #rightsection слишком много контента, содержимое переполняется. Поэтому я хочу изменить на position:absolute на position:static, когда есть свиток, обнаруженный при переполнении.

Я не очень хорошо разбираюсь в JQuery, поэтому я надеюсь, что кто-то из вас узнает ответ. Если кто-нибудь знает, я буду признателен.

(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

Решение

Я изменил (function($) по $(document).ready(function() и теперь он работает безупречно.

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);