ARTICLE AD BOX
Question
I am using Zebra_DatePicker (v2.2.0) with an input field that is placed inside a container using position: sticky.
The sticky container itself works correctly and stays fixed relative to the viewport while scrolling. However, when the Zebra_DatePicker calendar is opened, the popup does not remain aligned with the input field during scroll.
Expected behavior
The datepicker popup should stay visually attached to the input field While scrolling, the popup should follow the input as the sticky container changes its visual positionActual behavior
The datepicker popup is positioned correctly when first opened
After scrolling the page, the sticky container moves as expected
The datepicker popup stays at its original position and becomes
misaligned with the input
Why this happens (observed behavior)
Zebra_DatePicker appends the calendar element directly to the <body> and positions it using absolute coordinates based on the input’s initial offset.
When the input is inside a position: sticky container, the input’s visual position changes during scroll, but the datepicker popup position is not recalculated, causing the popup to detach from the input.
This behavior matches how the plugin is implemented in its official repository: https://github.com/stefangabos/Zebra_Datepicker
Environment
Zebra_DatePicker version: 2.2.0 jQuery-based initialization Input element inside a position: sticky container Datepicker popup appended to by the plugin <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/default/zebra_datepicker.min.css"> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/zebra_datepicker.min.js"></script> <style> body { padding: 50px; } .container { display: flex; gap: 20px; max-width: 800px; margin: 0 auto; } .content-left { position: sticky; top: 0; height: 500px; width: 100%; border: 1px solid #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; } .content-right { height: 2000px; width: 100%; border: 1px solid red; } </style> </head> <body> <h1>Open DatePicker and Scroll</h1> <div class="container"> <div class="content-left"> <div>Sticky Content</div> <input type="text" class="datepicker"> </div> <div class="content-right"></div> </div> <script> $('input.datepicker').Zebra_DatePicker(); </script> </body> </html>Is this behavior an inherent limitation of Zebra_DatePicker when used with position: sticky, or is there a supported way to handle this case?
