Cyberzinga Cyberzinga - 7 months ago 23
PHP Question

WordPress sticky php side bar while scrolling up and down

I am using WordPress which has a right sidebar. I want it sticky while scrolling up and down. I have given some css style. It is sticky now. But, problem it is shifting it's position from right to left.

Here is my sidebar.php

<div class="sidebarsticky col-md-4">

<?php // Select The Widgets

include TEMPLATEPATH . '/assets/sidebar/search.php';

if ( is_home()) { // For Home Page
include ABSPATH.'/wp-content/ads/300x600_side.php';
include TEMPLATEPATH . '/assets/sidebar/calendar.php';
include TEMPLATEPATH . '/assets/sidebar/featured.php';
include TEMPLATEPATH . '/assets/sidebar/fb.php';
include ABSPATH.'/wp-content/ads/side_3rdparty.php';
include TEMPLATEPATH . '/assets/sidebar/comments.php';
include TEMPLATEPATH . '/assets/sidebar/newsletter.php';
include TEMPLATEPATH . '/assets/sidebar/popular.php';

} elseif ( is_single()) { // For Single Page
include ABSPATH.'/wp-content/ads/300x600_side.php';
include TEMPLATEPATH . '/assets/sidebar/latest.php';
include TEMPLATEPATH . '/assets/sidebar/fb.php';
include ABSPATH.'/wp-content/ads/side_3rdparty.php';
include TEMPLATEPATH . '/assets/sidebar/popular.php';
include TEMPLATEPATH . '/assets/sidebar/featured.php';
include TEMPLATEPATH . '/assets/sidebar/newsletter.php';

} elseif ( is_category()) { // For Category Page
include ABSPATH.'/wp-content/ads/300x600_side.php';
include TEMPLATEPATH . '/assets/sidebar/latest.php';
include TEMPLATEPATH . '/assets/sidebar/fb.php';
include ABSPATH.'/wp-content/ads/side_3rdparty.php';
include TEMPLATEPATH . '/assets/sidebar/featured.php';
include TEMPLATEPATH . '/assets/sidebar/newsletter.php';

} elseif ( is_tag()) { // For Tag Page
include ABSPATH.'/wp-content/ads/300x600_side.php';
include TEMPLATEPATH . '/assets/sidebar/latest.php';
include TEMPLATEPATH . '/assets/sidebar/fb.php';
include ABSPATH.'/wp-content/ads/side_3rdparty.php';
include TEMPLATEPATH . '/assets/sidebar/featured.php';
include TEMPLATEPATH . '/assets/sidebar/newsletter.php';

} elseif ( is_archive()) { // For Archive Page
include TEMPLATEPATH . '/assets/sidebar/calendar.php';
include ABSPATH.'/wp-content/ads/300x600_side.php';
include TEMPLATEPATH . '/assets/sidebar/latest.php';
include TEMPLATEPATH . '/assets/sidebar/fb.php';
include TEMPLATEPATH . '/assets/sidebar/popular.php';
include TEMPLATEPATH . '/assets/sidebar/featured.php';
include ABSPATH.'/wp-content/ads/side_3rdparty.php';
include TEMPLATEPATH . '/assets/sidebar/newsletter.php';

} elseif ( is_page('gsearch')) { // For Search Page
include ABSPATH.'/wp-content/ads/300x600_side.php';
include TEMPLATEPATH . '/assets/sidebar/latest.php';
include ABSPATH.'/wp-content/ads/side_3rdparty.php';
include TEMPLATEPATH . '/assets/sidebar/newsletter.php';

} else { // All The Other Pages
include ABSPATH.'/wp-content/ads/300x600_side.php';
include TEMPLATEPATH . '/assets/sidebar/calendar.php';
include TEMPLATEPATH . '/assets/sidebar/latest.php';
include TEMPLATEPATH . '/assets/sidebar/fb.php';
include ABSPATH.'/wp-content/ads/side_3rdparty.php';
include TEMPLATEPATH . '/assets/sidebar/comments.php';
include TEMPLATEPATH . '/assets/sidebar/newsletter.php';
}

// include TEMPLATEPATH . '/assets/sidebar/tabs.php';
?>
</div>


CSS Style that I have used :-

.sidebarsticky {
position: fixed;
left: 0;
top: 0;
bottom: 0;
overflow: auto;
}

Answer

If you want it to stick to the right side, change your style to.

.sidebarsticky {
    position: fixed; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    overflow: auto;
}

left:0 will force sidebar to be at left rather then right side of the screen. right:0 will help you out.