在保持相对的同时使侧边栏在向下滚动时保持粘性答案

【问题标题】：Making a sidebar sticky on scroll down while staying relative在保持相对的同时使侧边栏在向下滚动时保持粘性
【发布时间】：2019-08-09 10:22:17
【问题描述】：

早安，

我正在使用 (S)CSS 和 ACF（高级自定义字段）从头开始构建我的第一个 WordPress 网站。我想要实现的是一个侧边栏，它在向下滚动时会粘在顶部。我正在使用 (S)CSS、Bootstrap 4 和 jQuery 来执行此操作。我已经知道我的侧边栏会在滚动时粘在顶部，但由于我必须使用位置：固定而不是位置：相对，页脚将通过侧边栏，因为它不再相对于其他元素。此外，当折叠菜单项时，它不会将页脚向下推。

这是页面：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;
}

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

【问题讨论】：

标签： jquery css wordpress css-position

【解决方案1】：

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

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

最好的办法是让它保持传统的侧边栏并允许它滚动。如果人们想将其用于导航，他们将能够在阅读您的内容并导航后向上滚动。你不需要一直把它放在他们的脸上。免得惹恼自己。

【讨论】：