[How To] Add Split Screen Scroll To Your Landing Pages

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:


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

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


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


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


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! :rocket:



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. :smiley:

1 Like

That’s a great script !
looking forward to try in a future variant :smiley:

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.