cihan17 cihan17 - 1 year ago 65
CSS Question

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

i am a beginner in javascript, and in wordpress.

i have the template Detube, which i want to modify. i have to make the sidebar semi fixed and the scroll infinite.

those modification are made but it doesn't work in the way that i want. The sidebar, appears on the left when oppening the site, and after few seconds it regains its place on the right. you can see the result here

i want to fix that issue

the code of the script is below

jQuery(document).ready(function($) {
$(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');


i call the script in the file function.php

function my_loader_jquery() {

if( !is_admin()){
wp_register_script('jquery', '', false, '');

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


in the css

#sidebar {

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

Note:Please excuse my english

Answer Source

Have you tried to call the script on window.load() instead of ready().

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download