how to fix scroll position of inner div based on parent div height

Issue

my design was in 2 columns first column: width 50px for menu second column: width remaining px

In second column Based on parent div height: 15611px(this may vary on content length) inner div position top position should change negatively

Second column:

<div class="column-wrapper" style="height:15611px;">
     <div class="homepage-column-left"  style="top:-5px"> 

          ----content------ images

     </div>
     <div class="homepage-column-right"  style="top:-5px"> 

          ----content------ images

     </div>
</div>

i expect that top position value should change into negative on scrolling

Solution

top: -5px; won't do anything unless the element also has position: absolute; and the parent element has position: relative;

I'd recommend css instead of inline, but here is what you need using inline styling...

<div class="column-wrapper" style="height: 15611px; position: relative;">
    <div class="homepage-column -left"  style="top:-5px; position: absolute;"> 
        ----content------ images
    </div>
    <div class="homepage-column -right"  style="top:-5px; position: absolute;"> 
        ----content------ images
    </div>
</div>

Answered By - kilkfoe