Split screen scrolling

  • 11 November 2016
  • 3 replies
  • 30 views
erayner

Hey everyone - how’s it going? 🙂

I am always trying to find new ways to do things along with new designs and concepts. I came across a pretty cool landing page the other day and I have tried to recreate it.

Link to my site

In this particular case I am trying to create a 1 sided scroll website - where the form stays in view on the right hand side and the left hand side of the page consists of information which you can scroll… - this part works fine.

Unfortunately, I am getting some errors:

  • my form isn’t showing up. It’s meant to be on the right hand side of the page, but literally isn’t there.
  • The scroll bar no longer appears (after tweaking code to make it work) but you can still scroll half of the page
  • Unbounce is meant to have default white background, but it’s all grey, as if there is no section (but there is)

Anyway, you can have a look at the website here

Any help would be greatly appreciated, I can post the code here if someone would like.

Thanks!

3 replies

Hristian
Userlevel 7
Badge +3

Hi @erayner,

A few months back I played around with the same idea but never got to implementing it on a live page.

Here is an example of what I put together and I think it closely matches what you are trying to achieve.

It’s just a rough concept. The black lines represent either the beginning or end of sections.

All it took is just a few lines of CSS:

<style>
  #lp-pom-box-13 {
   position:fixed;
   height:100%;
   width:320px; 
   top:0;
   left:20px; 
  }
</style>

This should get you going in the right direction.

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
erayner

I had a different approach

.scroll-container{ height: 100%; background-color: white; } .content{ padding: 50px 20px; height: 100%; overflow-y:scroll; width: 90%; } #lp-code-9{ height: 100vh; } #lp-pom-block-15{ width: 100%; }

I put a scroll box in an html code block using overflow-y: scroll.
But I will give yours a go now 🙂 Thanks!

Nicholas
Userlevel 7
Badge +4

This is a very unique layout! It would be interesting if you could hide it on mobile, as I’m assuming it wouldn’t provide the best usability experience on a mobile screen. But on desktop I could see this coming in handy!

Subscribe to Growth Marketing Weekly → https://growthmarketer.co/newsletter

Reply


Terms & ConditionsCookie settings