**TL;DR: Is Sticky actually able to react to changes I give through JavaScript? If so, how?**

*(The project is using Foundation 6.2 and WordPress 4.4, theme installed using Node.js/npm and gulp 4.0. My questions, in detail, are marked in bold print.)* 

I want to make the `nav` bar sticky using Foundation&#39;s Sticky Plugin, but only when I click on a button. That means that when the DOM is all finished, the `nav` bar shouldn&#39;t stick &quot;by itself&quot;, but stay in its top position in the document. *Additionally,* it should disappear when scrolling down, but stick while scrolling up.

The `nav` bar is correctly wrapped in all the required `div`s, so the `nav` bar is able to stick. The problems arise with the &quot;additionally&quot; part. My idea was to instantiate Sticky using PHP first:

    &lt;div data-sticky-container&gt;
      &lt;header class=&quot;header&quot; role=&quot;banner&quot; id=&quot;sticky_header&quot; data-sticky data-top-anchor=&quot;1&quot; 
        data-btm-anchor=&quot;content:top&quot; data-options=&quot;marginTop:0;&quot; style=&quot;width:100%&quot;
    &gt;
        &lt;?php get_template_part(&#39;parts/nav&#39;, &#39;offcanvas-topbar&#39;); ?&gt;
      &lt;/header&gt;
    &lt;/div&gt;

After that, change the `data-btm-anchor` to the current scroll position using JavaScript that&#39;s fired off on click. This did not work as well as I&#39;d like. What I&#39;ve tried so far:

 1.  When using `getElementByID` and then `setAttribute`, the `data-btm-anchor` in the PHP file does change according to Firebug, but that doesn&#39;t influence the `nav` bar a bit; it stays where it is. **Do I need to &quot;reinstantiate&quot; Sticky, and if so, how?**
 2.  The [docs][1] mention: 

&gt;Setting options with JavaScript involves passing an object into the constructor function, like this:
&gt; 
&gt; 

&gt;     var options = {
       multiExpand: true,
       allowAllClosed: false
    };
    var accordion = new Foundation.Accordion($(&#39;#some-accordion&#39;), options);

   **Does that mean I can pass *new parameters* to an already existing plugin instance?** Whenever I passed a new `Foundation.Sticky` object with nothing more than a differing *btmAnchor* as my options array parameter to my `jQuery(&#39;#sticky_header&#39;)`, nothing happened.

 3. The [docs][1] also propose programmatically adding Sticky to my &quot;sticky_header&quot;. If that worked, I could try to directly alter the jQuery object. So far I have been able to bind the Sticky plugin to my header successfully by:

    1. throwing the .js from which the button gets its function into `assets/js/scripts` (and then running `gulp`)
    2. deleting all the data-sticky tags from my `&lt;header class=&quot;header&quot;&gt;`, so there&#39;s no sticky plugin registered to the header when the DOM has finished loading
    3. programmatically adding the plugin:

            function button_fire(){
              var options = {
                topAnchor:&quot;1&quot;,
                btmAnchor:&quot;footer:top&quot;,
                marginTop:&quot;1&quot;
              };
              var stick = new Foundation.Sticky(jQuery(&#39;.header&#39;), options);
            }

    The header now gains the &quot;sticky&quot; class according to Firebug. But it still doesn&#39;t work - rather, it glitches: The &quot;header space&quot; is somewhat collapsed so it&#39;s slightly covering the &quot;content&quot; `div` below. What do you know, the header doesn&#39;t stick. Is that a bug?

    Suppose it would work &quot;brilliantly&quot; now, **am I theoretically able to change attributes by dereferencing `var stick` or using `jQuery(&#39;#sticky_header&#39;)` or `jQuery(&#39;.header&#39;)`?**

Above all of this, jQuery doesn&#39;t work as it should. I&#39;ve had a lot of problems with using **`$`** in my scripts, and I can&#39;t, for instance, run the `destroy()` method of Sticky because of this (if it worked, I may have destroyed an instance of Sticky to make a new one with the `btmAnchor` set to a new scrolling position). I&#39;ll open another question for this.

  [1]: http://foundation.zurb.com/sites/docs/javascript.html

All Zurb Foundation-6 Solutions on Gang of Coders

Total of 1 Zurb Foundation-6 Solutions

JointsWP4 (SASS): Changing Properties in Sticky