Wow that looks slick! I think I should be able to dig around for the script to achieve that functionality. Where’d you find that page if you don’t mind me asking? 😃

-Jess

Hi Jess, here is where they’re selling the template.

Hey @jpserra, I was able to recreate this functionality here with a bit of code. It’s behaving a little funny when I switch from desktop to mobile which I haven’t been able to diagnose, but I’ll share the code I used and maybe you’ll be able to figure it out better than me.

Here’s the sample page: http://unbouncepages.com/customer-demo-page/234567/

Here are some steps to recreate it:

Step 1

Add jQuery 1.4.2 in your Javascripts tab (placement: Head)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Step 2

Add a separate script to your Javascript tab and paste the following code (placement: Before Body End Tag) to achieve the sticky scroll. Remember to replace each instance of $(' your ID ') with the ID of the box that contains the image you’d like to stick. And replace $(' section ID ')with the ID of the section where you’d like the box to stop scrolling.

<script>



// Get the default css top and left values of sticky mobile

// Note: put your ID sticky element between = $(' your ID '), example: #lp-pom-box-55

  

var topValue = $(' your ID ').css( 'top' );



$(document).ready(function() {



// Defining variables

var $stick = $$(' your ID '), // ID Sticky Element.

    $foot = $(' section ID '),// ID End Section. (The section where you want the box to stop scrolling at)

    margin = 50,// you can change that value g margin from the top ]

    offtop = $stick.offset().top - margin,

    offbtm = $foot.offset().top - ( margin*2 + $stick.height() );



// Adding class 'natural' to the mobile

// Note: put your ID sticky element between $(' your ID ')

  

$(' your ID ').addClass('natural').css('left', 'auto' );



// Adding the cases

$(window).scroll( function () {



var scrtop = $(window).scrollTop();

  

  if ( scrtop > offtop && $stick.hasClass('natural') ) {

    $stick.removeClass('natural').addClass('fixed').css('top', margin);

  }

  if ( offtop > scrtop && $stick.hasClass('fixed') ) {

    $stick.removeClass('fixed').addClass('natural').css('top', topValue);

  }

  if ( scrtop > offbtm && $stick.hasClass('fixed') ) {

    $stick.removeClass('fixed').addClass('bottom').css('top', offbtm+margin);

  }

  if ( offbtm > scrtop && $stick.hasClass('bottom') ) {

    $stick.removeClass('bottom').addClass('fixed').css('top', margin);

  }

  

});





});

  

</script>

Step 3

Add the following CSS to your Stylesheets tab and replace #lp-pom-box-236 with the box ID that contains the image you’d like to stick

<style>



#lp-pom-box-236.fixed {position: fixed;}



</style>

Full disclosure I don’t share workarounds like this very often so I sure hope this makes sense!! If it works I’ll turn it into a standalone script to share with the wider community. Let me know if you’re able to get it working 🙂 Good luck!

-Jess

Thank you so much Jess. Really appreciate it!

My pleasure! Let me know if it worked 🙂

this was awesome and super helpful. Would you have some guidance as to how adapt this to work with more than a single box element? I tried duplicating the code and duplicating the code but changing variables names and nothing worked =/

Well first off I’m so glad this was helpful! 🤩

But I’m afraid I don’t know how I might be able to adjust this for an additional element 🤔 Do you have any examples in the wild that you had in mind that we can use as inspiration? That’s always helpful!

-Jess

Hi Jess,

I’ve followed your steps and updated it with my box/block ID’s but it still isn’t working for me. Any ideas fro troubleshooting?

Found this quite a bit later, but also attempted this and it doesn’t seem to be working – wondering if anyone has figured out another solution or a fix to this?