JointsWP4 (SASS): Changing Properties in Sticky

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!

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.

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);