Split screen scrolling (or vertical sticky column)

I see a lot of ways of doing a horizontal sticky bar but what about a vertical one, where one side of the screen “sticks” and the other side keeps scrolling.

Check out the 3rd section of this template: http://unbouncepages.com/horse-unbounce-landing-page-2/

Does anybody have written the codes to do that? Thanks.

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

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

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>

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 :slight_smile: Good luck!

-Jess

2 Likes

Thank you so much Jess. Really appreciate it!

1 Like

My pleasure! Let me know if it worked :slight_smile: