JointsWP4 (SASS): Changing Properties in Sticky

Question

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's Sticky Plugin, but only when I click on a button. That means that when the DOM is all finished, the nav bar shouldn't stick "by itself", 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 divs, so the nav bar is able to stick. The problems arise with the "additionally" part. My idea was to instantiate Sticky using PHP first:

<div data-sticky-container>
  <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%"
>
    <?php get_template_part('parts/nav', 'offcanvas-topbar'); ?>
  </header>
</div>

After that, change the data-btm-anchor 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:

1. When using getElementByID and then setAttribute, the data-btm-anchor in the PHP file does change according to Firebug, but that doesn't influence the nav bar a bit; it stays where it is. Do I need to "reinstantiate" Sticky, and if so, how?
2. The docs mention:

Setting options with JavaScript involves passing an object into the constructor function, like this:

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion($('#some-accordion'), 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('#sticky_header'), nothing happened.

3. The docs 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:

   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 <header class="header">, so there'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:"1",
          btmAnchor:"footer:top",
          marginTop:"1"
        };
        var stick = new Foundation.Sticky(jQuery('.header'), options);
      }
      

   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" div below. What do you know, the header doesn't stick. Is that a bug?

   Suppose it would work "brilliantly" now, am I theoretically able to change attributes by dereferencing var stick or using jQuery('#sticky_header') or jQuery('.header')?

Above all of this, jQuery doesn't work as it should. I've had a lot of problems with using $ in my scripts, and I can'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'll open another question for this.

Answer 1

You can just use the sticky css attribute in your scss.

In html or php add class to your component:

<div data-sticky-container class="sticky-container">

and in scss or css:

.sticky-container {
    position: sticky;
    top: 0;
    z-index: 10; 
}

Now just put the distance from top you need!

Answer 2

Prefer controlling the sticky by using jquery completely.

$(document).ready(function(){
    $('<Your button>').click(function () {
        $('html, body').animate({scrollTop: $('<where you want to go>').offset().top}, 1000);
    });

Using this you can make a button scroll you to any part of your website.

For the sticky, you want to add the sticky class only when you scroll past the first section so:

$(document).ready(function(){
    $(<Section name after which you want sticky to appear>).waypoint(function(direction){
        if (direction == "down"){
           $('nav').addClass('sticky');
           }else{
               $('nav').removeClass('sticky');
           }
    }, {
        offset: '60px'
    });

});

Using the waypoints plugin, you can now easily add the sticky class when you scroll past an element or section. Jquery selector can select by id and class using # and . respectively.

Answer 3

If you use wordpress, it enqueues JQuery automatically.

You have two ways to use JQuery in Wordpress.

Use JQuery instead $

Wordpress runs JQuery in his no conflict mode so you have to use Jquery instead $

Your Case

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion(JQuery('#some-accordion'), options);

Use $ like a variable

You can also use $ but you have to define a variable like this :

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion($('#some-accordion'), options);