Can anyone help me create a fixed element that behaves like a sticky element when scrolling and reaches the top of another specified element? I want this fixed element to stay within the boundaries of the element I set as the "ground", preventing it from passing beyond that point. Check out this pen I created to demonstrate what I am looking for: https://codepen.io/vendramini/pen/xNWpPK. I'm unsure about the specific calculations needed to achieve this effect, so any assistance would be greatly appreciated.
If you would like to see a visual representation of my idea, please visit the following link again: https://codepen.io/vendramini/pen/xNWpPK.
*{
margin: 0;
padding: 0;
}
section{
height: 100vh;
width: 100vw;
background: #eee;
position: relative;
max-width: 100%;
}
.a{
background: #faa;
}
.b{
background: #ffa;
}
.c{
background: #afa;
}
.d{
background: #aaf;
}
.sticky{
width: 100%;
position: fixed;
height: 100px;
background: blue;
opacity: 0.5;
bottom: 0;
z-index: 1;
}
.ground{
height: 2000px;
background: black;
}
//jQuery required
(function($){
$('[data-bound]').each(function(){
const $elem = $(this);
const $bound = $( $elem.data('bound') );
$(window).scroll(function(){
const scrollTop = $(window).scrollTop();
const boundTop = $bound.offset().top;
const boundHeight = $bound.height();
const delta = (scrollTop - boundTop); //+ boundHeight;
console.log({
scrollTop,
boundTop,
delta,
});
if( delta > 0 ){
$elem.css('bottom', delta);
}
else{
$elem.removeAttr('style');
}
});
});
})(jQuery);
<div class="sticky" data-bound="#ground"></div>
<section class="a"></section>
<section class="b"></section>
<section class="c"></section>
<section class="d"></section>
<footer class="ground" id="ground"></footer>
<section class="a"></section>
<section class="b"></section>
<section class="c"></section>
<section class="d"></section>
I am aiming to achieve a fixed element that stays within the bounds defined by the ground element without exceeding it. Your support in achieving this goal is much appreciated.