在网站加载完成之前，侧边栏不会显示在正确的位置

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

尝试在#sidebar .widget 上添加 position: relative 在 css:

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

Answer 2

您是否尝试过在 window.load() 而不是 ready() 上调用脚本。

在网站加载完成之前，侧边栏不会显示在正确的位置

sidebar not showing in the right place until the loading of the site finish

javascript

css

wordpress

sidebar