Position Sticky not working

[HjalmarCarlson]

I can’t seem to get this div to stick. I built a static page that matches the HTML structure of the page I built in Atelier and it works fine but when I add the CSS(position:sticky; top:20px;) to the page in WP nothing happens. Does the Atelier theme do something to overwrite position:sticky? or should this work?

Attached is a screenshot of the div i’m trying to make sticky.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

The position sticky doesn’t work in some browsers.
Try instead the position fixed.

position:fixed;

Hope it helps.

-Rui

[HjalmarCarlson]

Position:Fixed won’t work because this div only needs to be sticky within a specific section. Using Polyfills I should be able to get this working in most browsers, as I mentioned this does work on a static page, outside of the Atelier theme. Do you have any examples of position:sticky working in Atelier?

[Rui Guerreiro – SUPPORT]

This reply has been marked as private.

[HjalmarCarlson]

I ended up using Sticky.js, Thanks!

[HjalmarCarlson]

I was able to get it partially working but I had to do some sloppy JS to get the jQuery function to work, as the jquery function is firing before jQuery has been instantiated. Is there a way to move the jQuery script tag higher on the page or move the Custom JS embed lower?

Here is the jQuery i’ve added:

`(function($){
$(document).ready(function(){
$(“.stick”).sticky();

var distance = $(‘#the-inn’).offset().top – 250,
$window = $(window);

$window.scroll(function() {
if ( $window.scrollTop() >= distance ) {
$(“.stick”).unstick();
}
});
});
})(jQuery);`

Also I added the stickyJS script into functions, is this best way to add external scripts to Atelier?wp_register_script('sticky', plugins_url('/js/sticky.js'), 'jquery', NULL, TRUE);

[Rui Guerreiro – SUPPORT]

Try to include a small timeout so that the object already exists in the page.
Try to replace this line

$(".stick").sticky();

by this code

setTimeout(function(){
   $(".stick").sticky();
}, 3000);

This will cause a 3 seconds delay in the execution of that line of code, probably enough to work.

-Rui

[HjalmarCarlson]

I removed this (function($){ $(document).ready(function(){})(jQuery);

And my new script looks like this:

$(document).ready(function(){
    setTimeout(function(){
   $(".stick").sticky();
}, 3000);

var distance = $('#the-inn').offset().top - 250,
    $window = $(window);

$window.scroll(function() {
    if ( $window.scrollTop() >= distance ) {
        $(".stick").unstick();
    }});
});

But it doesn’t work because jQuery isn’t defined yet. This is the error I get:

Uncaught TypeError: $ is not a function at (index):1002

[Rui Guerreiro – SUPPORT]

just replace every $ by jQuery

-Rui

[HjalmarCarlson]

Replacing every $ with jQuery doesn’t work. And the other solution is breaking the other pages on the site.

I think the CSS position:sticky solution would work best. Will Atelier support polyfills, specifically this one(https://github.com/wilddeer/stickyfill)?

[David Martin – Support]

Hi there,

Unfortunately that customisation is beyond our scope of support as it is more work than a small customisation. We only provide support for theme issues, and at times basic customisations.

While we’d love to be able to support every customisation request, we simply don’t have the time. We recommend that you seek a freelance developer if you need to make that customisation.