Update event never change after first update

Hi, I'm trying to get notified when attachment and targetAttachment element change: top and left positions.

I'm initializing tether with this settings:

            var tether = new Tether({
                attachment: 'bottom center',
                targetAttachment: 'top center',
            });

As you can see. attachment is vertically positioned bottom and targetAttachment is vertically positioned with top.

When I scroll the page I expect to change attachment to top and targetAttachment to bottom. And I want to receive this info on update event like this:

            tether.on('update', function(event) {
              $('.element').html(`
                  attachment.top: ${event.attachment.top}
                  targetAttachment.top: ${event.targetAttachment.top}
              `)
            });

And it works first time . But if I scroll .element to initial position targetAttachment and attachment vertical position is not updated to their initial position.

Check this gif and see how

Code pen with example:

https://codepen.io/andresgutgon/pen/JMYgyx?editors=1000