Solved

Split screen scrolling (or vertical sticky column)

  • 23 August 2020
  • 9 replies
  • 376 views
jpserra

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.

icon

Best answer by Jess 25 August 2020, 21:05

View original

9 replies

Jess
Rank
Userlevel 7
Badge +1

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

jpserra

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

Jess
Rank
Userlevel 7
Badge +1

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 🙂 Good luck!

-Jess

jpserra

Thank you so much Jess. Really appreciate it!

Jess
Rank
Userlevel 7
Badge +1

My pleasure! Let me know if it worked 🙂

hugoh2p

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 =/

Jess
Rank
Userlevel 7
Badge +1

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

MJorgensen

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?

F
Badge

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?

Reply


Terms & ConditionsCookie settings