3

I have two divs :

<div class="row">
</div>


<div class="row">
</div>

I need to fix the first one while scrolling. I did this : 

<div style="position:fixed" class="row">
</div>

Now the divs are overlapping : https://jsfiddle.net/DTcHh/22068/

How can I solve this ?

DeseaseSparta
  • 271
  • 2
  • 4
  • 12

1 Answers1

4

HTML:

<div class="row fixed"></div>
<div class="row padding"></div>

CSS:

.fixed {
  position: fixed;
  background: #fff;
  z-index: 10;
  width: 100%;
}
.padding {
  padding-top: 54px // height of your fixed row, you have to change this value on different screen sizes (using media queries)
}

JSFIDDLE

max
  • 8,632
  • 3
  • 21
  • 55
  • Edit: I added `background`, `width` and `z-index`. – max Jun 24 '16 at 14:49
  • padding-top did not have any effect for me (or in the fiddle). I used margin-top:45px; instead...and that is working for me. – 11teenth Aug 23 '17 at 12:08
  • If you remove padding from that fiddle you won't see the text. – max Aug 23 '17 at 13:14
  • I didn't try removing the 'padding-top' but I did bump it from 54 to 150 to see the difference. And the main content did not move down. Which is what happened on my solution, too. So maybe I'm misunderstanding what is going on and the interaction with screen size concerns (as the comment on the code points out). Thank you for replying. – 11teenth Aug 23 '17 at 16:16
  • https://jsfiddle.net/5dptmuj9/14/ Hmm as you can see bigger `padding-top` pushes the main content down. Regarding to different screen sizes: if you don't set fixed height to your fixed div, the height will vary depending on amount of the content, so you have to change this padding depending on the height of the fixed row on different screen sizes. In other words: if you make screen size like 200px on this fiddle you will see that fixed row has height bigger than 150px, so you should increase padding on that screen size to see the content properly. – max Aug 23 '17 at 17:09
  • And there is nothing wrong to use `margin-top` but then you have to specify `top: 0` to fixed row. – max Aug 23 '17 at 17:13