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 div
s, 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:
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?
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.
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:
assets/js/scripts
(and then running gulp
)<header class="header">
, so there's no sticky plugin registered to the header when the DOM has finished loadingprogrammatically 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.
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With