✨🧲 feat: allow fixed/sticky positioning in config

README.md

@@ -202,6 +202,7 @@ Ad-rotator accepts the following configuration options and all of them are **Opt
 sticky: {
     beforeEl: document.querySelector('.start'),
     afterEl: document.querySelector('.end'),
+    position: 'sticky',     // or 'fixed' (defaults to 'fixed')
     offsetTop: '10',        // or '10px' (defaults to 0px)
     offsetBottom: '150px',  // or '150'  (defaults to 0px)
     noMobile: true          // disable stickiness on mobile (defaults to false)

demo/dev.html

@@ -29,10 +29,17 @@
       .end {
         height: 1000px;
       }
+
+      /* #publicity {
+        position: sticky;
+        top: 20;
+      } */
     </style>
     <main class="start">Main Content</main>
-    <div id="publicity">Ad area</div>
-    <section class="middle">Middle content</section>
+    <div class="container">
+      <div id="publicity">Ad area</div>
+      <section class="middle">Middle content</section>
+    </div>
     <footer class="end">Footer content</footer>
 
     <script>
@@ -45,6 +52,7 @@
           sticky: {
             beforeEl: document.querySelector('.start'),
             afterEl: document.querySelector('.end'),
+            position: 'sticky',
             offsetTop: '20',        // or '20px' (defaults to 0px)
             offsetBottom: '10px',   // or '30'   (defaults to 0px)
             noMobile: true          // disable stickiness on mobile (default - false)

docs/pages/config.html

@@ -439,8 +439,9 @@ <h4><a href="#config?id=sticky" id="sticky" title="sticky config param - Ad-rota
     sticky: {
       beforeEl: document.querySelector('.start'),
       afterEl: document.querySelector('.end'),
+      position: 'fixed',      // default - 'fixed'
       offsetTop: '20',        // or '20px' (defaults to 0px)
-      offsetBottom: '100px',   // or '100' (defaults to 0px)
+      offsetBottom: '100px',  // or '100' (defaults to 0px)
       noMobile: true          // disable stickiness on mobile (default - false)
     },
   }
@@ -474,6 +475,11 @@ <h4><a href="#config?id=sticky" id="sticky" title="sticky config param - Ad-rota
       i.e. when you scroll to/after this element, the Ad will no longer be sticky.
       By default, the Ad stays sticky permanently.
     </li>
+    <li>
+      <code>position</code>: <i>"fixed" | "sticky"</i> - refers to the positioning to be used.
+      By default, <b>fixed</b> positioning is used. When using <b>sticky</b> positioning,
+      the <i>beforeEl</i>, <i>afterEl</i> and <i>offsetBottom</i> options have no effect.
+    </li>
     <li>
       <code>offsetTop</code>: <i>number | string</i> - A margin that is added at the top of the Ad.
       Defaults to <b>0</b> i.e. sticks to the top of the screen.

src/ad-rotator.ts

@@ -56,7 +56,9 @@ const detectBlock = async () => {
 export const stickyEl = (El: HTMLElement, stickyConf: StickyConfig): null | (() => void) => {
   if (!El || !(El instanceof HTMLElement) || !stickyConf || stickyConf.constructor !== Object) return null;
 
-  const { beforeEl, afterEl, offsetTop, offsetBottom } = stickyConf;
+  const { beforeEl, afterEl, offsetTop, offsetBottom, position } = stickyConf;
+  const isStickyPos = position === 'sticky' ? 1 : 0;
+
   let startPos = 0,
     endPos = 0;
   let ticking = false;
@@ -78,11 +80,14 @@ export const stickyEl = (El: HTMLElement, stickyConf: StickyConfig): null | (()
           !(endPos && scrollPos > endPos - El.clientHeight - (parseInt(offsetBottom as string, 10) || 0))
         ) {
           El.classList.add('stickyElx');
-          El.style.position = 'fixed';
+          El.style.position = isStickyPos ? 'sticky' : 'fixed';
           El.style.top = (parseInt(offsetTop as string, 10) || 0) + 'px';
         } else {
-          El.style.top = '0';
-          El.style.position = 'relative';
+          if (!isStickyPos) {
+            // fixed positioning
+            El.style.top = '0';
+            El.style.position = 'relative';
+          }
           El.classList.remove('stickyElx');
         }
         ticking = false;

src/types.d.ts

@@ -12,6 +12,7 @@ export interface StickyConfig {
   afterEl?: HTMLElement;
   offsetTop?: string;
   offsetBottom?: string;
+  position?: 'fixed' | 'sticky';
   noMobile?: boolean;
 }