How to make left div fixed as it reaches its end until the right bigger div finishes

Question

I have 2 parallel divs, when page is scrolled and a specific div reaches its end I need to stop it from scrolling but continue scrolling for the other div. For better example see this website left Div How it Sticks

Do you want the other div to stay where it is or keep scrolling up? — Joey Wood, Sep 28 '16 at 01:34
@joey wood my left div have content.so it needs to be scrolled till the end end then make it fixed — Nikhil Mourya, Sep 28 '16 at 09:08

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

Try something like this. Basically whenever the page is scrolling, this will check where you are in the page and you can make a toggle based on that. I'd recommend once you get to that point on the screen to do an (element you want fixed).addClass()

edited May 23 '17 at 12:06

Community

1
1

answered Sep 28 '16 at 01:53

Joey Wood

273
1
10

score 0 · Answer 2 · answered Sep 28 '16 at 03:50

0

you can do it like this.refer the working demo.

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
</head>

<style type="text/css">
.left{
    width: 200px;
    height: 200px;
    background-color: orange;
    position: fixed;
    left: 0;
    top: 0;

}

.right{
    width: 400px;
    height: 1500px;
    background-color: gray;
    position: absolute;
    right: 0;
    top: 0;

}

.right h1{
    position: absolute;
    bottom: 0;
}


</style>


<body>

<div class="left">I am the left div</div>
<div class="right">I am the right div

<h1>bottom</h1>
</div>



<script type="text/javascript">


</script>




</body>


</html>

answered Sep 28 '16 at 03:50

caldera.sac

4,918
7
37
69

Thank you but my left div has content so it needs to be scrolled till the end – Nikhil Mourya Sep 28 '16 at 09:07
change your left div height as your need – caldera.sac Sep 28 '16 at 09:50
i have given an example of a website take a look at it – Nikhil Mourya Sep 28 '16 at 17:29

How to make left div fixed as it reaches its end until the right bigger div finishes

2 Answers2