[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)?

[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

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

[HjalmarCarlson]

Thanks David.

I enable both the Google Maps Geocoding API and Geolocation API’s an it work.

[HjalmarCarlson]

I’ve done this but i’m still getting the same result.

Do you see the issue as well?

[HjalmarCarlson]

I ended up using Sticky.js, Thanks!

[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?

[HjalmarCarlson]

Thanks, this is resolved.

[HjalmarCarlson]

Thanks!

[HjalmarCarlson]

I see it’s been updated but the boxed content modules aren’t scaled correctly now. I can probably resolve that on my own.

Can you explain to me what changes were made so I can do the same to other sections of the site?

[HjalmarCarlson]

This reply has been marked as private.

[HjalmarCarlson]

No, please see the screenshot I had attached in the original post or reload the page. The background colors for the two content boxes need to reach to the edge of the page.

[HjalmarCarlson]

Found the answer myself. In the row settings in Swift Page Builder you will see a section “Row Content Expand Options”, on/off toggle will appear there.

[HjalmarCarlson]

Thanks Kyle, that did the trick.

[HjalmarCarlson]

Kyle,

The way the blog looks is intentional, with the exception of the gutter spacing.

Also, if you look at my previous response, you’ll see I had already reverted all custom styles & theme modifications and even with the barebones Atelier theme it didn’t help. It’s since been reverted back.

A link to static image doesn’t help. Can please provide a live demo link?