Adding a Sticky Element in Sidebar

Site URL: https://www.thehomethatroams.com/blog/sailboat-essentials

Hello, I'm trying to make the code block at the bottom of my sidebar plugin sticky using CSS.

I have tried the below with no luck. It sounds like I may need to also target the parent div for it to work, but I'm not sure how to do that.

.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Thank you for any help or direction!

Hi. Have you solved this yet?

No, I haven't been able to fix this yet.

On 4/15/2021 at 4:15 PM, MorganYoungblood said:

No, I haven't been able to fix this yet.

Hi. I don't see Code Block. Also, If you use Sidebar Plugin, it has an option to set sticky. You can check instructions.html file

The ads on the webpage are being displayed in a code block in the sidebar plugin, ID is #block-yui_3_17_2_1_1618101487001_10034

When I set the sidebar plugin as sticky, the top of the sidebar is sticky (see attached) instead of being able to target the block with ads as sticky.

This is the CSS provided by the plugin for a sticky sidebar. I have tried a couple of tweaks to this to make #block-yui_3_17_2_1_1618101487001_10034 sticky but have not been successful.

Please let me know if you have any tips!

/* Plugin Sidebar - Custom Styles */
html .sidebar::before {
  content: '{"breakpoint":"980px","positionOnMobile":"bottom","sticky":"yes","stickyTop":"20px"}'!important;
}

html .sidebar {
  width: 325px;
}

html .sidebar__inner {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  z-index: 2;
  height: auto;
  margin: 0 3px;
  padding: 15px 10px 10px;
  background: #f4f3f2;
}

html body:not(.sidebar-is-stacked) .sidebar {
  width: 325px;
  margin: 0 0 0 25px;
}

html body.template-v7_1 .sidebar .page-section .content-wrapper {
  padding: 15px 10px 10px!important;
}

html body.template-v7_1 .sidebar .page-section,html body.template-v7_1 .sidebar .page-section .section-background {
  background-color: transparent!important;
}

html body.has-sidebar.template-v7_1:not(.sidebar-is-stacked):not(.sqs-edit-mode-active) .page-section.has-sidebar>.content-wrapper .contentwrapper .content,html body.has-sidebar.template-v7_1:not(.sidebar-is-stacked):not(.sqs-edit-mode-active) .page-section.has-sidebar~.page-section.section-has-sidebar>.content-wrapper>.content {
  padding-right: ~"calc(325px + 25px)";
}
/* end Plugin Sidebar - Custom Styles */