0

I have add tabs in the product view page:

<referenceBlock name="product.info.details">
    <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info">
        <arguments>
            <argument name="at_call" xsi:type="string">getDescription</argument>
            <argument name="at_code" xsi:type="string">description</argument>
            <argument name="css_class" xsi:type="string">description</argument>
            <argument name="at_label" xsi:type="string">none</argument>
            <argument name="title" translate="true" xsi:type="string">Details</argument>
        </arguments>
    </block>
    <block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
        <arguments>
            <argument translate="true" name="title" xsi:type="string">More Information</argument>
        </arguments>
    </block>
</referenceBlock>

is there anyway to made this tabs to remain "sticky" / fixed at the top of the page when we scroll the page?

I try to do like this but is not work:

$(window).scroll(function () {
    if( $(window).scrollTop() > $('.product.data.items').offset().top && !($('.product.data.items').hasClass('sticky'))){
    $('.product.data.items').addClass('sticky');
    } else if ($(window).scrollTop() == 0){
    $('.product.data.items').removeClass('sticky');
    }
});

Thank you

0

That is not how it works.

In your CSS you need:

position: sticky;

And that is about it. The parent container is important, your element is 'sticky' within the parent container and the magic of the browser handles that for you without the need for any of this observing the scroll in jQuery complicatedness.

Start with a simple example so you can get 'sticky' working first, then add what you know to Magento2.

For instance, move the price block to the form and set it to 'sticky' so it stays on the page whilst you scroll past options to get to the buy now button. Note how it isn't sticky initially at the top of the page or when the parent container slips off the page.

This exercise will give you a better idea of how 'sticky' works in practice and how you can use it in your designs.

  • Hi thank you for your answer but the position must be fixed, not "sticky" and your answer is not related with the product view page TABS. – Robert Oct 21 at 14:24
  • Got you, you are adding a class to make it 'sticky' even though it is not CSS 'position: sticky'. My advice is to actually rewrite the whole of the tabs interface with CSS Grid and to use position sticky. Right now the code is a sea of divs that is bloated and not worthy your time. Plus the default tabs are usually useless. – Mavis Bacon Oct 21 at 14:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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