title: How to catch a 3rd party JS event to modify its action?
body: <p>How to catch a 3rd party JS event to modify its action ?</p>
  <p>My example is i have set a stickybar on my website using foundation.</p>
  <pre><code>&lt;div data-sticky=&quot;xrwv5y-sticky&quot; class=&quot;toc-desktop toc toc-tree sticky is-anchored is-at-top&quot; data-top-anchor=&quot;main:top&quot; data-btm-anchor=&quot;main:bottom&quot; data-resize=&quot;49dgxp-sticky&quot; data-mutate=&quot;49dgxp-sticky&quot; style=&quot;max-width: 288.567px; margin-top: 0px; bottom: auto; top: 0px;&quot; data-events=&quot;mutate&quot;&gt;&lt;h2 class=&quot;heading&quot;&gt;Sommaire&lt;/h2&gt;&lt;ol class=&quot;circle&quot;&gt;...
      
  </code></pre>
  <p>When scrolling down, the JS from foundation apply a different margin-top on the is-stuck class</p>
  <pre><code>&lt;div data-sticky=&quot;xrwv5y-sticky&quot; class=&quot;toc-desktop toc toc-tree sticky is-at-top is-stuck&quot; data-top-anchor=&quot;main:top&quot; data-btm-anchor=&quot;main:bottom&quot; data-resize=&quot;49dgxp-sticky&quot; data-mutate=&quot;49dgxp-sticky&quot; style=&quot;max-width: 288.567px; margin-top: 1em; bottom: auto; top: 0px;&quot; data-events=&quot;mutate&quot;&gt;&lt;h2 class=&quot;heading&quot;&gt;Sommaire&lt;/h2&gt;&lt;ol class=&quot;circle&quot;&gt;&lt;li&gt;&lt;a href=&quot;#pararaph-header-730&quot;&gt;
      
  </code></pre>
  <p>I would like to modify this behaviour to add some px to the margin-top depending if the top admin toolbar is displayed or not</p>