Sticky child div relative to parent div horizontal scroll

Question

I am having some issues with child div sticky inside the parent div. Parent div having two child divs. child2 height is going beyond the height of parent div. So I have added the scroll for parent div. Now the problem is I want to make the child 1 div as sticky, when i Make the child 1 as sticky the width of this div is going out of the parent div. The child1 should go inside the parent div and able to scroll the parent div horizontally.

.parent {
  width:250px;
  height:250px;
  background-color:#CCCCCC;
  position:relative;
  overflow:scroll;
}

.child1 {
  width:500px;
  height:50px;
  background-color:#4285F4;
  position:fixed;

}
.child2 {
  height:500px;
  width: 600px;

}

<div class="parent">
   <div class="child1"></div>
    <div class="child2"></div>
</div>

Any help would be deeply appreciated.

Update the exact problem is, when i give width for child2 as 500px, I am able to scroll horizontally. But child1 is moving out of the parent div and the content is displaying.

Child 2 has a fixed position which means its relative to the window - not the parent div. — Derek Story, Apr 03 '14 at 14:52
Both child divs are relative to parent only. Child1 should be sticky inside the parent — user3494213, Apr 03 '14 at 14:59
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ Read about positioning here. — Derek Story, Apr 03 '14 at 15:00
How do you expect to see the right side of `.child1` with an horizontal scroll if it is fixed ? — Brewal, Apr 03 '14 at 15:03
Possible duplicate of [CSS position element "fixed" inside scrolling container](https://stackoverflow.com/questions/11261270/css-position-element-fixed-inside-scrolling-container) — TylerH, Oct 26 '17 at 16:52

score 0 · Answer 1 · answered Apr 03 '14 at 15:03

0

Why don't you give your child1 a defined width that is fitting to the parent, that way you can still use fixed as positioning?

See the DEMO

answered Apr 03 '14 at 15:03

LOTUSMS

10,317
15
71
140

score 0 · Answer 2 · answered Apr 04 '14 at 07:17

Thanks for your support guys. I solved the problem by adding the following Jquery code and make the child1 as position: absolute

$(document).ready(function(){
  $(".parent").scroll(function(){
    console.log("scorled");
$(".child1").css("top", $(".parent").scrollTop() + "px");
 });
});

Sticky child div relative to parent div horizontal scroll

2 Answers2