WordPress粘性php侧栏同时向上和向下滚动

时间:2016-05-09 13:08:01

标签: php html css wordpress

我正在使用右侧边栏的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;
}

1 个答案:

答案 0 :(得分:1)

如果您希望它贴在右侧,请将您的样式更改为。

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

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