Within this nested structure, I have a mysterious div with an unpredictable height and another one set to 125px in height.
My goal is to transform the second div into a sticky element that remains fixed within its parent container only.
The grey box represents the container, and adjacent to it is a social media div that needs to maintain its stickiness.
https://i.sstatic.net/cYAVp.jpg
Since more content will follow after the container, utilizing 'position: fixed' won't work. My attempts using 'position: absolute' along with adjusting 'top' value or applying 'transform: translate' resulted in jittery behavior on Chrome.
Here's the code snippet I experimented with:
$offset = $(".social-media").offset().top;
$containerHeight = $(".sticky-container").height();
$bottom = $containerHeight + $(".sticky-container").offset().top;
$maxPoint = $containerHeight - $(".social-media").height();
$(window).scroll(function(){
if($(window).scrollTop() >= $offset){
if($(window).scrollTop() >= $bottom){
$(".social-media").css({transform: "translate(0px,"+$maxPoint+"px)"});
}else{
$scroll = $(window).scrollTop() - $offset;
$(".social-media").css({transform: "translate(0px,"+$scroll+"px)"});
}
}else{
$(".social-media").css({transform: "translate(0px,0px)"});
}
});