javascript - Making sticky div up to a point -
i'm trying make div start being fixed when gets div, , stop being sticky when hits div, stay in position left. position of div sticky div should stop can anywhere depending on article lenght. can work on 1 resolution, not on others.
surprisingly, getting fixed works of time, "stop being fixed" part doesn't work (my div messes in height).
here code:
$(document).scroll(function() { var topoflastdiv = ($("#scroll_to").position().top)-630; var topoffirstdiv = ($("#tour_user_info").position().top)+20; var topoflastdivsocial = topoflastdiv+100; var y = $(document).scrolltop(), header = $("#tour_price_map"); social_media = $('#social_media_sticky'); if (y < topoffirstdiv) { header.css({position: "relative", "top" : "0px", "transform": "translatex(0)"}); header.fadein(100); social_media.fadeout(100); } if(y >= topoffirstdiv && y<topoflastdiv) { social_media.fadein(100); header.css({position: "fixed", "top" : "50px", "transform": "translatex(216.2%)"}); } if (y >= topoflastdiv && y < topoflastdivsocial) { header.css({position: "relative", "top" : topoflastdiv-520, "transform": "translatex(0)"}); } if (y>= topoflastdivsocial) { social_media.fadeout(100); header.css({position: "relative", "top" : topoflastdiv-520, "transform": "translatex(0)"}); } });
the random numbers in code me trying make fit on laptops resolution works great then.
what missing here?
i fixed using "absolute" instead of "relative" in last 2 if clauses , adjusted "top" , "transform" accordingly.
Comments
Post a Comment