jquery - 在保持相对的同时向下滚动时使侧边栏变粘

Question

早上好

我正在使用 (S)CSS 和 ACF(高级自定义字段)从头开始构建我的第一个 WordPress 网站。我想要实现的是在向下滚动时粘在顶部的侧边栏。我正在使用 (S)CSS、Bootstrap 4 和 jQuery 来执行此操作。我已经知道我的侧边栏会在滚动时保持在顶部，但由于我不得不使用位置:固定而不是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

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

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

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