I found a better solution for this case. Please check the snippet again. https://mdbootstrap.com/snippets/standard/theotherguy/2471844#js-tab-view

Best regards

thanks for your time

I made a solution in your snippet. There is a need to re-activate sticky after tab change. It has to be done in the project/snippet manually like this:

var tabElements = document.querySelectorAll('a[data-toggle="tab"]');
var stickyElements = document.querySelectorAll('.sticky');

tabElements.forEach((tab) => {
  tab.addEventListener('show.bs.tab', () => {
    stickyElements.forEach((sticky) => {
      var stickyInstance = mdb.Sticky.getInstance(sticky);
      stickyInstance.inactive();
      stickyInstance.active();
    })
  });
});

Best regards

The issue can recreated in chrome, firefox and operah. i know they probably all use nearly the same engine.

If you notice how far i scrolled, and then clicked on the tabs.

when the sticky is in a tabs navigation and below or near the view, the sticky element prepositions to the top left until scroll event.

https://mdbootstrap.com/snippets/standard/theotherguy/2471844

This is the issue I am referring to. This seems to be an issue when there is content above the tabs.