https://www.compsmag.com/wp-content/themes/soledad/js/sticky_share_v2.js

1function initStickyShareBox() {
2  const posts = document.querySelectorAll('.post');
3  const isRTL = document.documentElement.dir === 'rtl'; // detect RTL
4
5  posts.forEach(post => {
6    const shareBox = post.querySelector('.tags-share-box');
7    if (!shareBox) return;
8
9    const shareBoxHeight = shareBox.offsetHeight;
10
11    function getStickyOffset() {
12      const header = document.querySelector('.penci_builder_sticky_header_desktop');
13      const headern = document.querySelector('.sticky-wrapper');
14      const poststicky = document.querySelector('.penci-post-sticky-nav');
15      const headerHeight = header ? header.offsetHeight : 0;
16      const poststickyHeight = poststicky ? poststicky.offsetHeight : 0;
17      const headernHeight = headern ? headern.offsetHeight : 0;
18      return headerHeight + poststickyHeight + headernHeight + 60;
19    }
20
21    function updatePosition() {
22      const postRect = post.getBoundingClientRect();
23      const postTop = postRect.top + window.scrollY;
24      const postBottom = postTop + post.offsetHeight;
25      const scrollY = window.scrollY;
26
27      const offset = getStickyOffset();
28
29      // Calculate fixed alignment
30      const shareRect = shareBox.getBoundingClientRect();
31      const sidePos = isRTL
32        ? window.innerWidth - (shareRect.left + shareRect.width)
33        : shareRect.left;
34
35      if (scrollY + offset > postTop && scrollY + shareBoxHeight + offset < postBottom) {
36        shareBox.style.position = 'fixed';
37        shareBox.style.top = offset + 'px';
38
39        if (isRTL) {
40          shareBox.style.right = sidePos + 'px';
41          shareBox.style.left = '';
42        } else {
43          shareBox.style.left = sidePos + 'px';
44          shareBox.style.right = '';
45        }
46      } else if (scrollY + shareBoxHeight + offset >= postBottom) {
47        shareBox.style.position = 'absolute';
48        shareBox.style.top = (post.offsetHeight - shareBoxHeight) + 'px';
49        shareBox.style.left = '';
50        shareBox.style.right = '';
51      } else {
52        shareBox.style.position = 'absolute';
53        shareBox.style.top = '0px';
54        shareBox.style.left = '';
55        shareBox.style.right = '';
56      }
57    }
58
59    window.addEventListener('scroll', updatePosition);
60    window.addEventListener('resize', updatePosition);
61    updatePosition();
62  });
63}
64
65document.addEventListener('DOMContentLoaded', initStickyShareBox);