Update event never change after first update

[Andrés]

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

[Andrés]

I think the issue is here: https://github.com/HubSpot/tether/blob/master/src/js/constraint.js#L345

Initial targetAttachment.top is === when you scroll back to initial page position (in my example). So change is not detected and event is not fired

[Raghavendra Bhat]

@andresgutgon can i work on this issue

[Andrés]

Sure! go ahead 💪