[Resolved] How to achieve floating element in sidebar

[Dimitar]

Hello there,

I am not sure if this question is okay to be posted at the support forum, but I have nowhere to ask and thought at least you could give me a clue.
I would like to achieve the same as in this blog post page: https://kinsta.com/blog/recurring-revenue-model/
When you scroll a bit on the right side there is a call to action box which sticks when it reaches the center.

I got really curious about how they did they achieve that. I’ve had some clues looking at the source code, but cannot really understand the whole mechanism behind it?

This is the code:

<aside id="aside-cta-mini" class="is-floating-mode" style="top: 0px; height: 100%;">
  <div id="aside-cta-mini-aligner" class=" js-stickybit-parent" style="height: 98.954%;">
    <div class="cta-mini cta-mini--floating" style="top: 314.5px;">
      <div class="cta-mini--light">
        <div class="heading--normal mb--30 text--superbold">Are you tired of slow WordPress hosting & horrible support? We do things different at Kinsta.</div>
        <div class="mt--10">
          <a class="button--purple button--small" onclick="gtag('event', 'click', {'event_category' : 'sidebar', 'event_label' : 'floating-minimal'})" href="https://kinsta.com/plans/?article-sidebar-floating">Check out our hosting plans</a>
        </div>
      </div>
    </div>
  </div>
</aside>

And what I found looking at it.
– The CTA element is not part of a sidebar, so how is it positioned at the sidebar place?
– I saw they are using class “js-stickybit-parent” which is part of this library – https://github.com/dollarshaveclub/stickybits . Could this library be part of any WordPress Plugin? Or maybe they used a child theme and did this in the code?
– When you shrink the page size (e.g. mobile) the CTA get located between the text

What I would appreciate receiving an answer to would be:
– How can I place an element(widget) on the right of the text block, without it being in the right sidebar?
– How can I achieve this sticky effect? Do you know any good addons or if it is easy to integrate stickybit in a child theme?
– Could you recommend add-ons, steps, and tips in order to achieve the same effect?

Thank you!

[David]

Hi there,

ignoring the part where the CTA merges with content as thats something a lot more complicated to do. The there is this plugin:

https://en-gb.wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

Or you can simply use the position: sticky; CSS property. Example:

.class-of-element-to-make-sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 40%;
} 

Sticky elements position themselves within their container so a widget would only stick within the height of the sidebar. Whereas the sidebar would sticky to the content area. Which effects how far the element will scroll down the page.

If you have a site set-up with the CTA in place then we can take a look.

[Dimitar]

I am once again amazed by you guys! Such a prompt reply for such a vague/weird question!

Thanks a lot for the proposed Addon.

I’ve managed to partially achieve this effect, but still, there are issues:
1) I must use 3 add-ons to achieve this effect which sounds like overkill and could cause slowness.
– Sticky Menu anything on roll: to stick it.
– Reusable Guttenberg Block as widget – so my CTA box can be used a widget thus I can put it in the right sidebar
– Content Aware Sidebars so I can use different CTA on different pages.

Is there are a way to achieve this in a more effective way, preferably not using sidebars?

2) As far as I can see Sticky Menu anything can be used on one element only?

3) For the sharing icons on the left side, I am using Super Simple Social Networks which float on the left on each page. But it seems like using a Guttenberg block as a widget confused the Super Simple Social Network Plugin.

I’ve added a link in the link are of my initial post.

Best regards,
Dimitar

[David]

1. Not much that can be done without custom coding. If you have the official Gutenberg Plugin installed then it has a Widgets (Beta) option that allows you to add blocks to the widget area so could remove one plugin – but it is Beta so can’t say 100% it will work correctly.

2. Currently Sticky Anything plugin can only do one element.

3. Looks like the Social Share plugin filters the_content to add their icons, i assume that the block being used is also calling the_content or that could be the plugin used to add them to widgets that is causing that. You could give the Widgets (Beta) option a go as mentioned above.

[Dimitar]

Thanks a lot David!

Any idea how to enable that feature. I couldn’t find anything…

Best regards,
Dimitar

[David]

You need to install this plugin:
https://en-gb.wordpress.org/plugins/gutenberg/

This plugin gets all the updates several weeks before they get rolled into the WP core editor. The Widgets beta option is available from the dashboard menu.

[Dimitar]

Thanks a lot!
Case closed, once again you are great guys!

[David]

Awesome – glad to be of help.

[Author]

Posts