WordPress粘性php侧栏同时向上和向下滚动(WordPress sticky php side bar while scrolling up and down)

WordPress粘性php侧栏同时向上和向下滚动(WordPress sticky php side bar while scrolling up and down)

我正在使用WordPress，它有一个右侧边栏。 我想让它在上下滚动时发粘。 我给了一些CSS风格。 现在很粘。 但是，问题在于它从右向左移动它的位置。

这是我的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样式： -

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

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; }

最满意答案

如果你想要它坚持到右侧，改变你的风格。

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

left:0将强制侧边栏位于屏幕的左侧而不是右侧。 right:0会帮助你。

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.