manpreet singh manpreet singh - 23 days ago 7
CSS Question

Two div together in parallel

I am facing problem in maintaining two div parallel

First div should contain large data but scrolls with browser and 2 div should contain small data with stay fixed right hand side.

So when user scrolls page, both div should should stay in parllel

Like example is here(example)[https://app.thehomelike.com/apartment/RyeR9wQH4N7p2YRJA]
in above page when you just visit after description, it shows two parllel div .. one stays fixed .. other move with browser scrollbar

Edit My efforts

<div className="book">

<table>
<tr>
<td>
<div class className="page1">
<h2>Page1</h2>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
</div>
</td>
<td>
<div className="page2" style={style} onScroll={this.handleScroll.bind(this)}>
<h2>Page2</h2>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
</div>
</td>
</tr>
</table>
</div>
//css

.book table td {
vertical-align: top;
}

.page1 {
border: solid 1px red;
width: 400px;
}

.page2 {
border: solid 1px red;
width: 400px;
position: static;
}

Answer

$(document).ready(function(){
	$(function(){
		$(document).scroll(function(){
			if($(this).scrollTop() >= $('.largeCont').offset().top) {
				$(".fixedCont").addClass('active');
			} else {
				$(".fixedCont").removeClass("active");
			}
		});
	});
});
html, body {
    margin: 0;
}

.section1 {
  background-color: #fff;
  height: 300px;
}

section {
  display: flex;
  flex-wrap: wrap;
}
section .largeCont {
  width: 70%;
}
section .fixedCont {
  height: 100vh;
  background-color: green;
  width: 30%;
}
section .fixedCont.active {
  position: fixed;
  right: 0;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section1">
  SOME CONTENT
</section>

<section>
  <div class="largeCont">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis enim maxime dicta quaerat id a maiores modi facilis, quisquam inventore at cum voluptas veniam obcaecati et sequi, libero, molestias tempore! Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Officiis dolores vero, rem quod inventore, ipsam cupiditate rerum tempore explicabo veniam voluptatem dolorem minima dignissimos id est harum sequi odit, corporis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur consequuntur
    necessitatibus provident accusantium, explicabo velit dolorum molestiae soluta doloribus architecto ea nesciunt porro distinctio quod nulla mollitia, obcaecati impedit dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo eos, porro
    neque optio id aspernatur error atque blanditiis qui odio accusantium assumenda recusandae dolores culpa laborum voluptas, facere provident nam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi a dignissimos similique, incidunt
    quas voluptatem fuga adipisci. Non deleniti obcaecati, doloribus tempora deserunt, facilis ipsum magnam quis veritatis ut nemo! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam quos adipisci debitis inventore sed, fugit, maxime vitae
    expedita consectetur a numquam nostrum repellendus vero mollitia, rem beatae vel ex aliquam!
  </div>
  <div class="fixedCont">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis mollitia amet ipsam vel saepe, rerum deserunt accusantium ratione reprehenderit eaque unde cumque! Expedita amet molestiae, dolorem porro nam nisi dolorum.
  </div>
</section>

Some like this? I think this is.

Comments