Side by side divs different heights and scrolling

1

I’m building a tribute page but I need help about side by side divs. I’m not sure how to put it in words, but I will try. There are two divs side by side with different heights. The left one is smaller than the right one. If you scroll down you will reach the bottom of the left one first and its position stay fixed. But then, if you still scroll down you will see the remaining contents of the right div. Here’s an example: http://tesla.aziznatour.com/ In the biography section. I’m not sure if I can do this with HTML5 and CSS3 alone. This is what I did: http://codepen.io/KairozS/pen/rWoYKN

I’ve been searching for an answer for three days. I don’t know how to search for what I’m looking for.

2

Hi,

I’m not sure how to help but maybe Bootstrap Scrollspy and affix could help.

Although it’s meant for navigation at first. you might be able to use at least the principle.

I’ve used a scrollspy here mostly because I wanted to try it.

Like I said look at the documentation on Bootstrap but it might put you on the tracks.

Another possibility is to write some javascript - something with scroll…

1 Like
3

As far as I know this effect is not possible in just html/css. It’s most probably some js library/plugin to create this effect. I looked at the source code, but all the javascript is in one file and minifiled, so almost impossible to figure out by looking at it. Maybe try to contact the website creator and ask him how he achieved the effect

2 Likes
4

In Codepen you just have to add the Bootstrap + js etc in the settings - or you really don’t want to use anything else than CSS?

In that case no, it’s not possible (I think).

1 Like
5

Hi, I was checking the page again. You’re right. You need Javascript to achieve that effect.

HTML and CSS look like this before you reach the bottom of the left div:

Its position is relative.

But when you reach the bottom:
Imgur
Its position is fixed.

I thought you can do this without Javascript. Probabibly the Javascript function triggers when you’re at certain position of the webpage. Thank you for reply. I wanted to do this just with HTML and CSS because I wanted to keep this simple.

@vdineva Thanks for pointing out Javascript is needed.
@timotheap Thanks for letting me know that scrollspy and affix exist. I’ll take a look at them in the future.

6

You will get to do that sort of thing really soon and then you’ll be able to come back to your tribute page and improve it.

7

hello @KairozS ,

I am having same problem as you mentioned …can you plz help me with it