Skip to main content

Hey everyone!


I asked, and you delivered! A few weeks ago I requested your feedback for what kind of content we should be sharing in the community, and there was one particular response that I thought was awesome:



Full disclosure, I don’t claim to be the most gifted individual at Unbounce when it comes to creating custom scripts, however, I’ve been able to implement a request from @jpserra a few weeks ago and thought I should share the official workaround here with you all.


@jpserra had posted looking for a workaround that would create split screen functionality so that as the user scrolled, some content would remain pinned to the section, as shown in the GIF below:


page


Here’s the landing page to see it in action.


Here are the 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.




Show code
<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   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>

And that should do it!


I’ll do my best to start sharing more how-to content like this, as long as it’s helpful! Let me know in the comments below if you were able to get this set up, I’d love to see it in action!


Happy page building! 🚀


-Jess

I just want to say THANK YOU for this!! This is a greatttt email. More companies should be doing emails like this!

Excellent, this is exactly the kind of thing I was looking for. 😃

That’s a great script !

looking forward to try in a future variant 😃

I followed the instructions and I get invalid script. Not sure what I’m doing wrong.


Can someone give a working code? I probably replace incorrectly


for whatever reason this section is showing up for me with two “$” symbols before the (’ your ID’) and that was an error that was popping up on mine

Also, beware that the ID End Section does not refer to the section your object should end WITHIN but rather the section that it should stop BEFORE OF. Just to clarify since it seems a bit ambiguous

Do you have a suggestion of how this could work with multiple elements?

I have this idea, to show a product’s POD that as you scroll, the product get’s “built”, with more image boxes getting fixed on top of each other as you scroll down with accompanying text that gets scrolled offscreen, showcasing the “fully built” product at the end.

can someone please share the tutorial here…coz im not able to make it work

Hey everyone!

I’d like to share an alternative that doesn’t require any Javascript. Just a box and a little bit of CSS 😊 This method is simpler to implement and allows you to place the sticky element anywhere on your page.

See it in action here: http://unbouncepages.com/partial-vertical-sticky-example/


It’s important to note that this method utilizes position: sticky, which isn’t supported by old versions of common browsers and old browsers like Internet Explorer 11. These older versions are not widely used anymore, so it shouldn’t be a big issue. For more details on the browsers that support sticky positioning, check out this page: https://caniuse.com/css-sticky

And here is a video tutorial to share all the steps:


***************
 Correction to the CSS mentioned in the video!

The top value doesn’t have to be the distance between the sticky element and the top of the page. It works great if it’s set to a smaller number like 30px (as shown in the example page above). This value represents the padding between the sticky element and the top of the window as we’re scrolling through the sticky element. Adjust the value to fit your needs 😊

<style>
  #lp-pom-XXX-XXX {  /* replace with the id of your sticky element */
    position: sticky;
    top: 30px; /* change number to fit your needs */
  }
</style>

 

Reply


Terms & ConditionsCookie settings