Position div at the top of screen after scrolling

Question

I'm working with angular 2, but this questions is mostly about css (I'm using bootstrap 3). I've got 2 divs (leftDiv and rightDiv) like this:

<div class="row">

 <div *ngFor="let address of addresses">
  <div class="card" id="leftDiv">
   <h5 class="card-text">{{address.name}}</h5>
   <h5 class="card-text">{{address.street}}</h5>
   <h5 class="card-text">{{address.city}}</h5>
  </div>
 </div>

 <!-- bunch of code -->

 <div class="col-md-6" id="rightDiv">
  <!-- should appear at the top of current view -->
 </div>

</div>

So, there are a bunch of cards with addresses on the left side (leftDiv). The rightDiv appears only with the click of a button, and also only 1 at a time. What happens at the moment is, that the rightDiv appears at the top of the page (so if you scrolled down far enough you don't even see it). What it should do is appear at the top of the current view.

position: fixed;

does that, but then it sticks to the top of the screen, which i don't want (i should just appear and stay there). I've also tried to set the position of the leftDiv and rightDiv to relative and absolute, but that seems only to work if one is the parent of the other (which is not possible in my case).

Help would be greatly apppreciated.

Solution:

document.getElementById('rightDiv').style.top = 
document.body.scrollTop.toString()+'px';

(See Top Answer)

score 2 · Answer 1 · answered May 11 '17 at 17:21

2

This css code will make the div stick to top of screen

position:fixed;top:0px;Right:0px;Left:0px;

answered May 11 '17 at 17:21

Shubham Sharma

84
5

that's exactly what i'm trying to prevent. It should just appear at the top of the screen, but not stick to it... – JustYourCasualProgrammer May 11 '17 at 17:23
Then in that case you must try this – Shubham Sharma May 11 '17 at 17:34
width:100%; position:absolute; top:0px; height:20px; – Shubham Sharma May 11 '17 at 17:34

score 0 · Accepted Answer · edited May 23 '17 at 12:10

0

This might be worth looking into. jquery how to get the page's current screen top position?

Then in your CSS I would set the position to absolute like this:

position: absolute;

I assume you already have a clickhandler for your button (which shows the rightDiv). So here you could add:

$('#rightDiv').prop('top',$('#html').offset().top*-1);

(the times -1 is very important as the offset will be negative). The code mentioned above probably won't work right away, I'm no CSS master but that's how I used to solve a problem like that.

edited May 23 '17 at 12:10

Community

1
1

answered May 11 '17 at 18:11

Matthias Raes

75
6

Thanks, exactly what I was looking for! I used document.getElementById('rightDiv').style.top = document.body.scrollTop.toString()+'px'; which worked like a charm – JustYourCasualProgrammer May 11 '17 at 19:06

score 0 · Answer 3 · edited May 23 '17 at 11:54

0

enter code here

<table>
 <tr>
  <td style="width:100px; height:500px; background:#00aa00">
    foo
  </td>
  <td style="float:right">
    bar
  </td>
</tr>
   </table>

Should make it so that it stays on our screen no matter how far down you scroll

or if you want the on the right to appear wherever you are currently scrolled to, check this out and use that to set the margin-top: Determine distance from the top of a div to top of window with javascript

edited May 23 '17 at 11:54

Community

1
1

answered May 11 '17 at 18:59

Matt Buckborough

44
5

that's the exact same solution of "Shubham Sharma", which doesn't work in my case since i **don't** want it to stick to the top screen... – JustYourCasualProgrammer May 11 '17 at 19:05

Position div at the top of screen after scrolling

3 Answers3

This css code will make the div stick to top of screen