Question

早上好，

我正在使用（S）CSS和ACF（高级自定义字段）从头开始构建我的第一个WordPress网站。我想要实现的是一个向下滚动时贴在顶部的侧边栏。我正在使用（S）CSS，Bootstrap 4和jQuery来做到这一点。我已经知道我的侧边栏将在滚动条上停留在顶部，但是由于我不得不使用position：fixed而不是position：relative，因此页脚将通过侧边栏，因为它不再相对于其他元素。同样，在折叠菜单项时，也不会将页脚向下推。

这是页面：https://ikycreative.ikydev.nl/kennisbank/web-development/wat-is-een-error-code/

<div class="border-right" id="sidebar-wrapper">
  <div class="list-group list-group-flush">
    <a href="#seoList" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle list-group-item list-group-item-action">SEO</a>
    <div class="collapse <?php if ($cat == 'SEO') { echo 'show'; }?> list-unstyled" id="seoList">
      <?php 
        while($loop_seo->have_posts()) : $loop_seo->the_post(); 
          echo '<h4><a class="list-group-item list-group-item-action sub-link" href="' . get_permalink() . '">'; the_title(); echo '</a></h4>';         
        endwhile;
      ?>
    </div>
    <a href="#seaList" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle list-group-item list-group-item-action">SEA</a>
    <div class="collapse <?php if ($cat == 'SEA') { echo 'show'; }?> list-unstyled" id="seaList">
      <?php 
        while($loop_sea->have_posts()) : $loop_sea->the_post(); 
          echo '<h4><a class="list-group-item list-group-item-action sub-link" href="' . get_permalink() . '">'; the_title(); echo '</a></h4>';             
        endwhile;
      ?>
    </div>
    <a href="#smoList" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle list-group-item list-group-item-action">SMO</a>
    <div class="collapse <?php if ($cat == 'SMO') { echo 'show'; }?> list-unstyled" id="smoList">
      <?php 
        while($loop_smo->have_posts()) : $loop_smo->the_post(); 
          echo '<h4><a class="list-group-item list-group-item-action sub-link" href="' . get_permalink() . '">'; the_title(); echo '</a></h4>';         
        endwhile;
      ?>
    </div>
    <a href="#devList" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle list-group-item list-group-item-action">Web development</a>
    <div class="collapse <?php if ($cat == 'Web development') { echo 'show'; }?> list-unstyled" id="devList">
      <?php 
        while($loop_webdev->have_posts()) : $loop_webdev->the_post(); 
          echo '<h4><a class="list-group-item list-group-item-action sub-link" href="' . get_permalink() . '">'; the_title(); echo '</a></h4>';         
        endwhile;
        wp_reset_postdata();
      ?>
    </div>
  </div>
</div>

jQuery(function() {
  var shrinkHeader = 300;
  var shrinkSidebar = 170;
  jQuery(window).scroll(function() {
    var scroll = getCurrentScroll();
    if (scroll >= shrinkHeader) {
      jQuery('#main-header').addClass('sticky');
    } else {
      jQuery('#main-header').removeClass('sticky');
    }
    if (scroll >= shrinkSidebar) {
      jQuery('#sidebar-wrapper').addClass('fixed');
    } else {
      jQuery('#sidebar-wrapper').removeClass('fixed');
    }
  });

  function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
  }
});

.fixed {
  position: fixed;
  width: 100%;
  top: 100px;
}

#sidebarWrapper {
  width: 250px;
  position: relative;
}

我尝试过使用带有固定子容器的相对容器，反之亦然。任何帮助或建议，将不胜感激。我对开发很陌生，在其他主题中找不到答案。

Answer 1

因此，您的问题的答案将是以下两件事之一：要么必须在显示页脚时删除固定位置，要么需要设置侧边栏的z-index，以使其位于页脚顶部，然后将页脚内容推到右侧（侧边栏的宽度）。

但是，您正在尝试做的事情会在其他领域引起您的各种头痛。您遇到的问题最少，是您最担心的问题...尝试在说765px x 550px的设备上查看您的网站。您会注意到，如果侧栏中的一些项目处于打开状态，您将无法滚动侧栏并单击底部的项目。它们只是从屏幕上滑落，并且由于该项目现已修复而无法访问。这是我们离开粘性侧边栏的原因之一，因为我们无法控制用户拥有哪种类型的视口。

您最好的选择是保留它的传统边栏并使其滚动。如果人们想使用它进行导航，他们将能够在阅读您的内容并进行导航后向上滚动。您不需要一直将它们放在脸上。避免烦恼。

使侧边栏保持向下滚动时保持粘性

1 个答案: