MAHMOUD ABDELNABY
Cro · CLI SCRIPT · 2

Mobile Persistent Bottom Sticky CTA Conversion Benchmark

Boost mobile landing page conversions with a 60fps, zero-dependency sticky CTA bar built with modern IntersectionObserver.

Problem it addresses

Develop a high-performance mobile sticky CTA component (sticky_cta.js): 1) Uses modern IntersectionObserver (0 scroll event listeners) for 60fps performance and zero INP penalty, 2) Automatically detects when native CTA is visible and hides smoothly, 3) Supports bilingual RTL/LTR layouts with countdown timer and price display, 4) Complete HTML demo and performance test suite.

Who it is for

BOTH operating in high-growth e-commerce, digital publishing, and direct-response marketing across Saudi Arabia, UAE, and Egypt.

What is inside

Key files listed in the README repository architecture:

  • css/sticky_cta.css
  • demo/index.html
  • docs/performance-benchmark-inp.md
  • docs/sticky-cta-ab-test-results.md
  • examples/demo_storefront.html
  • LICENSE
  • README.md
  • src/sticky_cta.css
  • src/sticky_cta.js
  • src/sticky_cta_logic.js
  • tests/component.test.js
  • tests/test_sticky_cta.py

How to evaluate and use it

  1. Read the README first and confirm that the documented problem matches your use case.
  2. Inspect the listed files to find the data, tools, templates, and tests relevant to your task.
  3. Follow the repository’s Quick Start and check prerequisites before running commands.
  4. Compare outputs with documented examples and review limitations before using them in a decision or client workflow.

Quick Start from the README: python -m unittest discover -s tests · node --test tests/*.test.js

Scope and limitations

  • iOS Safe Area Inset Accommodation: Persistent bottom CTAs must include 'padding-bottom: env(safe-area-inset-bottom)' to prevent overlap with native iOS home indicators.
  • Screen Real Estate Budget: Fixed bottom bar height should be tested at the actual viewport and text scale so it does not obscure essential content.
  • Scroll-Directional Visibility: Bar reveals on subtle scroll-up or maintains persistent presence with smooth opacity transition.

This page summarizes the available documentation; it does not establish performance or business results. Verify data and prerequisites before use.

Related repositories