The required behaviour I am looking for is :
- The yellow span must be in fixed position when it is inside the pink div
- If the page is scrolled further than the pink div, the yellow span must be absolutely positionned to the bottom of the pink div and scroll up with it
- If the page is scrolled back up to the pink div, the yellow span must go back to fixed position
- The yellow span must be positioned relatively to viewport (
position:fixed;) when it is inside the pink div. - The height of yellow span must always be the same as viewport height minus 100px. It has a fixed width in px.
- The yellow span must be verticaly centered in the viewport (this rule is modified by rule 4).
- On scroll, the yellow span must never be outside the boundaries of the pink div. If the page is scrolled further than the pink div, the yellow span must be absolutely positionned to the bottom of the pink div and scroll up with it
- If the page is scrolled back up to the pink div, the yellow span must go back to fixed position (as in rule 1 and 2).
I know sticky positioning does exaclty that but I can't use it because of poor browser support. So I made this snippet and would like to know if it can be optimized or shortened :
$(document).scroll(function() {
var span = $('span'),
div = $('div'),
spanHeight = span.outerHeight(),
divHeight = div.height(),
spanOffset = span.offset().top + spanHeight,
divOffset = div.offset().top + divHeight;
if (spanOffset >= divOffset) {
span.addClass('bottom');
var windowScroll = $(window).scrollTop() + $(window).height() - 50;
if (spanOffset > windowScroll) {
span.removeClass('bottom');
}
}
});*{margin:0;}
div {
position: relative;
background: pink;
height: 800px;
margin-bottom: 800px;
}
span {
position: fixed;
right: 0;
bottom: 50px;
width: 10%;
height: calc(100vh - 100px);
background: gold;
}
.bottom {
position: absolute;
bottom: 0;
right: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
<span>some content</span>
</div>