Magento 2 - How I can made Tabs to be sticky

Question

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

Answer 1

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.