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