Sticky sidebar

[KatyPurry]

Hello,

I'm trying to stick half the sidebar on scrolling. I'm not using the "default" sidebar because I use only my widgets. This is my code.

As you can see, I created a div id sticky_sidebar but it doesn't work. Only method working is when I stick from #secondary element (all the sidebar). Do you have a workaround because I don't want to break the sidebar on mobile ? Thank you !

<?php

/**
 * The sidebar containing the main widget area
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Bootscore
 *
 * @version 5.2.0.0-beta1
 */

if (!is_active_sidebar('sidebar-1')) {
  return;
}
?>

<div class="col-lg-4 col-xxl-3 order-first order-lg-last">
  <aside id="secondary" class="widget-area">

    <button class="btn btn-secondary w-100 mb-4 d-flex d-lg-none justify-content-between align-items-center" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="sidebar">
      <?php esc_html_e('Open the sidebar', 'bootscore'); ?> <i class="fa-solid fa-ellipsis-vertical"></i>
    </button>

    <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="sidebar" aria-labelledby="sidebarLabel">
      <div class="offcanvas-header bg-dark">
        <span class="h5 offcanvas-title" id="sidebarLabel"><?php esc_html_e('Sidebar', 'bootscore'); ?></span>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" data-bs-target="#sidebar" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body flex-column">
      <?php get_template_part("/sidebar/custom1"); ?>
      <?php get_template_part("/sidebar/custom2"); ?>
      <?php get_template_part("/sidebar/custom3"); ?>
      <div id="sticky_sidebar">
      <?php get_template_part("/sidebar/custom4"); ?>
      <?php get_template_part("/sidebar/custom5"); ?>
      </div>
      </div>
    </div>

  </aside><!-- #secondary -->
</div>

My CSS :

#sticky_sidebar {
  position: sticky;
  top: 50px; 
  z-index: 99;
}

EDIT: it is not related to this question but how can we make donations for the project ? You only seem to have your shop. Do you have a PayPal or similar account? I would like to support Bootscore

[crftwrk]

Hi,

at first to not affect the mobile offcanvas, simply use media queries in _bscore_custom.scss. In your case breakpoint is lg:

@media (min-width: 992px) {
  // Do stuff here
}

Thanks to Sass we can use mixins instead:

@include media-breakpoint-up(lg) {
  // Do stuff here
}

As you mentioned, this works fine if you make the whole #secondary sidebar sticky:

@include media-breakpoint-up(lg) {
  #secondary {
    position: sticky;
    top: 50px;
  }
}

If you want to stick just a part of the sidebar, then you must give element enough space to be sticky by adding 100% height to it's parent elements and reset card-body flex. This should be do the trick:

@include media-breakpoint-up(lg) {

  #secondary,
  #sidebar,
  #sidebar .offcanvas-body {
    height: 100%;
  }

  #secondary .card-body {
    flex: 0;
  }

  #sticky_sidebar {
    position: sticky;
    top: 50px;
  }
}

For your edit: Thank you! We want to enable the sponsor feature in near future #187. But setup this is more hard than we thought. So, at this point, if you want to support you can buy a plugin https://bootscore.me/shop/. And yes, both plugins are very cool!

[KatyPurry]

Thank you very much @crftwrk for your detailed answer. As usual, it works perfectly. I didn't know the trick at all to adding 100% height to the parent elements and reset card-body flex. Very useful !

[crftwrk]

You're welcome 👍