Sticky div scrolls too far

April 27, 2022

I have a jquery code which makes an existing element follow the scroll of the user. I want it to stop when reaching a certain element #header-line, but it’s not consistent. On some PDPs it scrolls and stops there, on others, it scrolls past the line.

Page: https://www.norli.no/to-pappaer
(Code is not activated here)

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);
  });
});

>Solution :

You could definitely take advantage of using position: sticky if you are able to make sure all parent elements of the sticky element have overflow: visible

In that link you posted, if you wanted .product-add-form to be position: sticky you would have to make sure .off-canvas-wrapper has the overflow: hidden changed to overflow: visible.

I made an example fiddle of that page you shared so you could see how easy it would be to make that side form sticky.

https://jsfiddle.net/treckstar/d30phae8/8/