CODEWITHSUNDEEP
jquerycsswordpresscss-position
Jasper Janssen
Jasper Janssen

Reputation: 63

Making a sidebar sticky on scroll down while staying relative

Goodmorning,

I'm building my first WordPress website from scratch with (S)CSS and ACF (Advanced Custom Fields). What I would like to achieve is a sidebar that sticks to the top when scrolling down. I'm using (S)CSS, Bootstrap 4 and jQuery to do this. I've already got to the point that my sidebar will stick to the top on scroll but since I had to use position: fixed instead of position: relative, the footer will go through the sidebar because it's no longer relative to other elements. Also when collapsing a menu item it will not push the footer down.

This is the page: 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;
}

I've tried using a relative container with a fixed child and vice versa. Any help or suggestions would be appreciated. I'm quite new to development and could not find the answer in other topics.

Upvotes: 0

Views: 1240

Answers (1)

Daniel C
Daniel C

Reputation: 2155

So, the answer to your question will be one of two things... either you must remove the fixed position when they footer comes into view, or you need to set the z-index of the sidebar so it will sit on top of the footer, and push the footer content to the right (width of the sidebar).

However, what you are trying to do is going to cause you all sorts of headaches in other areas. What you are having an issue with is the least of your concerns... try to view your website on a device of say 765px by 550px. You'll notice that if a few items in the sidebar are open, you lose the ability to scroll your sidebar and click the bottom items. They simply slip off the screen and are inaccessible since the item is now fixed. This is one of the reasons why we have moved away from sticky sidebars, since we can't control what type of view port the user has.

Your best bet is to keep it a traditional sidebar and allow it to scroll. If people want to use it for navigation, they will be able to scroll back up after reading your content and navigate. You don't need to keep it in their face the whole time. Save yourself the aggravation.

Upvotes: 1

Related Questions