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()上调用脚本。

侧栏未显示在正确的位置，直到装载完成

2 个答案: