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)


Comments

Post a Comment

Popular posts from this blog

IF statement in MySQL trigger -

this query code in mysql trigger. if 1=2 select 'yes'; else select 'no'; end if; but has following error: if '1'='2' select 'yes' error code: 1064. have error in sql syntax; check manual corresponds mysql server version right syntax use near 'if '1'='2' select 'yes'' @ line 1 0.000 sec what solution?
Read more

c++ - What does MSC in "// appease MSC" comments mean? -

i run across // appease msc in c++ comments, e.g. here : const int& array::operator[](int offset) const { int mysize = getitssize(); if (offset >= 0 && offset < getitssize()) return ptype[offset]; throw xboundary(); return ptype[offset]; // appease msc! } what msc stand ? the author means microsoft's compiler, more formally known msvc.
Read more

android - MPAndroidChart - How to add Annotations or images to the chart -

i working latest mpandroidchart library , looking way add annotations or images clickable. example: once data reaches value event occurs want able display user - there multiple events can occur annotations (not sure if right word) or image added @ point in chart. any pointers welcome. check documentation of yaxis . focus on setspacetop(...) , setaxismaxvalue(...) methods. for background: bar-shadow , disable calling: barchart.setdrawbarshadow(false) or change color: bardataset.setbarshadowcolor(int color)
Read more