Tengo un código jquery que hace que un elemento existente siga el desplazamiento del usuario. Quiero que se detenga al llegar a cierto elemento #header-line , pero no es consistente. En algunos PDP, se desplaza y se detiene allí, en otros, se desplaza más allá de la línea.
Página: https://www.norli.no/to-pappaer (Aquí no se activa el código)
jQuery
require(['jquery'], function($){ $(document).ready(function() { (function($) { var element = $('.product-add-form'), originalY = element.offset().top; var hr = $('#header-line > hr'); topOfLine = hr.offset().top; var topMargin = 250; element.css('position', 'relative'); $(window).on('scroll', function(event) { var scrollTop = $(window).scrollTop(); var nextPosition = scrollTop - originalY + topMargin; var maxPositionAllowed = topOfLine - 1000; element.stop(false, false).animate({ top: scrollTop + 250 < originalY ? 0 : Math.min(nextPosition, maxPositionAllowed ) }, 0); }); })(jQuery); }); });Definitivamente podría aprovechar el uso de position: sticky si puede asegurarse de que todos los elementos principales del elemento sticky tengan overflow: visible
En ese enlace que publicó, si desea que .product-add-form sea position: sticky , debe asegurarse de que .off-canvas-wrapper tenga overflow: hidden cambiado a overflow: visible .
Hice un violín de ejemplo de esa página que compartiste para que pudieras ver lo fácil que sería hacer que ese formulario lateral fuera pegajoso.