javascript - Sticky element inside a div with absolute position on scroll -

i have div position: absolute , overflow: auto. inside div have div should act sticky , should fixed(top: 0, bottom: 0, overflow: auto) when scroll.

i can fix div, can't return original position because can't attached scroll event when div fixed.

$('.right').scroll(function() {     if ($('.scroll').offset().top <= 0) {         $('.scroll').css({             'position': 'fixed',             'top': 0,             'left': '20px',             'right': '0',             'overflow': 'auto'         })     } }) 

please check jsfiddle more info - jsfiddle

thank you.

here's how it. doesn't position fixed has same appearance. once scrolltop equal or greater top of fixed content "should be" set top absolutely of scrolltop, if scroll upwards once scrolltop reaches point fixed content used be, drop again.

$(document).ready(function() {   oldoffset = $('.scroll').offset().top;   $('.right').scroll(function() {     if ($('.right').scrolltop() > oldoffset) {       $('.scroll').css({         'position': 'absolute',         'top': $('.right').scrolltop(),         'left': '20px',         'right': '0',         'overflow': 'auto'       });     }   }); }); 

(demo)