Docs

[Deep-Image]

Hi,

First of all great theme – we’ve been doing our best to push the boundaries and test what is achievable out of the box.

One thing that has cropped up is that we would really like to integrate jquery sticky-kit with Theme X, so far I’ve got our child theme set up & successfully added the jquery.sticky-kit.js to the head using the following code:

function theme_js() {
    wp_enqueue_script( 'theme_js', get_stylesheet_directory_uri() . '/js/jquery.sticky-kit.js', array('jquery'));
}

add_action('wp_enqueue_scripts', 'theme_js');

The call has been added to the “edit global javascript” (customizer) using the following code:

/*!
 * Sticky-kit
 * A jQuery plugin for making smart sticky elements
 *
 * Source: http://leafo.net/sticky-kit/
 */
 
$(".stickme").stick_in_parent({
    offset_top: 10
});

And finally the stickme class has been added to the column in question (case studies on the home page).

For some reason unbeknown to me this isn’t providing the expected results, in other words nothing is happening 🙁 – do you have any suggestions or can you see any errors or omissions in the above?

Thanks in advance – ps the testing site is testing.deep-image.co.uk

[Rue Nel]

Hello There,

Thanks for writing in and the very detailed post information. I have investigated your site and it seems that you have inserted a partial JS code. Please have it updated and use this instead:

(function($){
  $(".stickme").stick_in_parent({
    offset_top: 10
  });
})(jQuery);

Please let us know if this works out for you.

[Deep-Image]

Wow, now that’s great support – I can confirm that it worked a treat. One more thing, looking at the details from leafo:

Recalculating Sticky Elements

If you're changing the markup of your page on the fly by removing, adding or resizing elements then you most likely need to tell Sticky Kit to recalculate the sticky elements to guarantee they're positioned correctly.

You can manually cause a recalculation to happen by triggering an event on document.body:

$(document.body).trigger("sticky_kit:recalc");
Typically you only need to trigger a recalculation if you are changing the positions/sizes of elements above the sticky element, adjacent to it, or the sticky element itself.

Instead of manually calling sticky_kit:recalc you can use the recalc_every option described above to periodically do a recalculation between ticks. Setting it to 1 will cause a recalculation to happen on every scroll event, preventing the state from ever being out of date.

$("#sticky_item").stick_in_parent({recalc_every: 1});

It would seem that we should be able to deal with resizing a fluid layout by using the following code based upon your previous post:

(function($){
  $(document.body).trigger("sticky_kit:recalc");
})(jQuery);

However we still get some jumping on the page when resizing the browser – can you think of a quick fix to resolve this?

[Joao]

Hi There,

If you are getting the jumps while re-size the browser it is most likely because the js won´t reload while re-sizing.

Try reloading the browser in different sizes and let us know if there is issues.

Let us know how it goes.

Joao

[Deep-Image]

Hi Joao.

I assumed the same but the elements still remain out of place even after reload (every other pixel increment from 768px – 1190px causes a jump in the layout).

[Joao]

Hi There,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks

Joao

[Deep-Image]

Hi Joao.

It’s was at the end of my first post (I must admit it was a little lengthy though), the site in question is: testing.deep-image.co.uk

As you will notice, I’ve managed to find a little workaround although I think my method could be consolidated slightly by an expert eye ;). My solution is as follows:

Reduced adjacent column width by 0.1% which resolved the jumping issue and isn’t detrimental to the layout:

@media (min-width: 768px){
.x-column.x-1-2 {width: 47.9%;}
}

Added js to detach sticky element for smaller browser widths & reattach when resized back up – I feel this could definitely be consolidated (I’m still in learning with the js side of things):

/*!
 * Sticky-kit
 * A jQuery plugin for making smart sticky elements
 *
 * Source: http://leafo.net/sticky-kit/
 */
(function($){
  $(".stickme").stick_in_parent({
    offset_top: 120
});
})(jQuery);
(function($){
$(window).resize(function () {
    var viewportWidth = $(window).width();
    if (viewportWidth < 768) {
            $(".stickme").trigger("sticky_kit:detach")
    }
    if (viewportWidth > 768) {
            $(".stickme").stick_in_parent({offset_top: 120})
    }
});
})(jQuery);

If you feel there is a better approach then please do let me know – oh, & thanks for being so efficient!

[Rad]

Hi there,

CSS is okay, that’s the only way to achieve it 🙂

About the javascript, it’s okay too as long as you follow the sticky library’s standard.

Thanks!

[Deep-Image]

Yay! Cheers guys

[Thai]

If you need anything else please let us know.

[Author]

Posts