側邊欄沒有顯示在正確的地方，直到網站完成加載

Question

我是一個初學者的JavaScript和wordpress。

我有模板Detube，我想修改。我必須使側邊欄半固定和滾動無限。

這些修改，但它不工作，我想要的方式。側欄在操作該站點時出現在左側，幾秒鐘後重新恢復到右側。你可以看到結果這裏
我想解決這個問題

腳本的代碼如下

jQuery(document).ready(function($) { 
    $=javascript.noConflict(); 
    $(document).scroll(function() { 

     var scrollPosition = $(document).scrollTop(); 
     var scrollReference = 2100; 
     if (scrollPosition >= scrollReference) {  
      $('#dpe_fp_widget-4').css('position', 'fixed'); 
      $('#dpe_fp_widget-4').css('top', '100px'); 
      $('#dpe_fp_widget-4').css('left', 'initial'); 

      $('#dpe_fp_widget-5').css('position', 'fixed'); 
      $('#dpe_fp_widget-5').css('top', '100px'); 
      $('#dpe_fp_widget-5').css('left', 'initial'); 

      $('#text-6').css('position', 'fixed'); 
      $('#text-6').css('top', '550px'); 
      $('#text-6').css('left', 'initial'); 

      $('#text-7').css('position', 'fixed'); 
      $('#text-7').css('top', '550px'); 
      $('#text-7').css('left', 'initial'); 

     } else { 
      $('#dpe_fp_widget-4').css('position', 'absolute'); 
      $('#dpe_fp_widget-4').css('top', '841px'); 
      $('#dpe_fp_widget-4').css('left', '0px'); 

      $('#dpe_fp_widget-5').css('position', 'absolute'); 
      $('#dpe_fp_widget-5').css('top', '841px'); 
      $('#dpe_fp_widget-5').css('left', '0px'); 

      $('#text-6').css('position', 'absolute'); 
      $('#text-6').css('top', '1291px'); 
      $('#text-6').css('left', '0px'); 

      $('#text-7').css('position', 'absolute'); 
      $('#text-7').css('top', '1291px'); 
      $('#text-7').css('left', '0px'); 
     }; 
    }); 

}); 

我調用腳本在文件function.php

function my_loader_jquery() { 

    if(!is_admin()){ 
     wp_deregister_script('jquery'); 
     wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, ''); 
     wp_enqueue_script('jquery'); 
    } 
} 

add_action('init', 'my_loader_jquery'); 

function theme_js() { 

    wp_enqueue_script('sidebar-fixe', get_template_directory_uri() . '/js/sidebar-fixe.js', array()); 

    wp_enqueue_script('infinite-scroll', get_template_directory_uri() . '/js/infinite-scroll.js', array()); 

} 

css

#sidebar { 
    width:336px; 
    float:right; 
} 


/*== Sidebar 
*=================================*/ 
#sidebar .widget{width:300px; padding-top: 30px;} 

注意：請原諒我的英語

Answer 1

您是否嘗試過呼籲window.load()，而不是ready()腳本。

Answer 2

嘗試添加位置：相對上#sidebar在CSS .widget ：

#sidebar .widget { 
     width: 300px; 
     padding-top: 30px; 
     position: relative; 
}