I want to make an upper bar as in https://www.atma.com.ar/molinillo-electrico-atma-mc8141n.html that contains the product info and the "add-to-cart" button, and that appears only when I scroll under the add-to-cart button and remains fixed under the header during the scroll.

Help me please.

2 Answers 2


Use this js:- https://www.jqueryscript.net/other/jQuery-Plugin-For-Creating-Sticky-Html-Elements-Sticky-Kit.html

example site:- https://bedwintokyo.com/coach-jacket-jill-20ab5539.html

May be help for you.

  • thanks, but it's not what i was looking for. I need create a UI component or something like this that retrieves the product data and put it in my new sticky bar, but i dont know how. Oct 21, 2020 at 18:09

For Sticky Product page Image Some time issue with sticky properties so We can used jquery in direct phtml file for magento 2.


require([ "jquery" ], function($){
            let mediaTop = $('.product.media').offset().top;
            let mediaHeight = $('.product.media').height() - 52;
            let mediaBottom = mediaTop + mediaHeight;
            $(window).scroll(() => {
                var width = $(window).width();
                if(width > 1024) {
                        if($(window).scrollTop() >= 200){
                            let infoBottom = $('.product-info-main').offset().top + $('.product-info-main').height();
                            if(mediaBottom <= infoBottom) {
                                let scrollTop = $(window).scrollTop();
                                let mediaTopAdjust = Math.max((scrollTop - mediaTop), 0);
                                let newMediaBottom = mediaTop + mediaTopAdjust + mediaHeight;
                                let bottomHeightDiff = infoBottom - mediaBottom;
                                if(newMediaBottom <= infoBottom) {
                                    $('.product.media').css('position', 'fixed');
                                } else {
                                        $('.product.media').css('top', bottomHeightDiff + 'px');
                                        $('.product.media').css('position', 'relative');
                        } else {
                                $('.product.media').css('position', 'relative');
                                $('.product.media').css('margin-top', "");


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.