jquery - Fixed position div within a fluid grid parent wrapper? -

i've built website using fluid 12 column grid. i'd fix position of 1 of divs in right hand column when reaches top of page (using stickyjs or equivalent)

however when fixed position applied div taken out of dom , breaks grid structure div looses parent formatting.

https://jsfiddle.net/k4r00au0/

position: fixed; 

is there way maintain divs position , size after fixing scroll position?

i've tried:

width: inherit; 

to no avail

thank in advance help, abit stumped one!

you can fix through javascript, setting width manually.

var fixed = $('#fixed'),     container = fixed.closest('.inheritw');  $(window).on('resize',function(){     fixed.width( container.width() ); }).trigger('resize') 

demo @ https://jsfiddle.net/k4r00au0/1/