I have a fixed positioned Div that should stop scrolling / become unfixed, so not to pass over a footer DIV. So this is not a question of using z-index to place the footer over the fixed DIV. The fixed div should stop above the footer. https://jsfiddle.net/euje2kqq/
#fixedDiv{ position:fixed; width:100px; height:175px; margin-top:30px; background-color:#DB1926; color:white; padding:10px; display: inline-block; vertical-align:top; } Can anyone help or put me in the right direction. Thanks.
Hope this helps.
DEMO
$(document).scroll(function() { var $self = $("#fixedDiv"); $self.css('margin-top', 0); var fixedDivOffset = $self.offset().top + $self.outerHeight(true); // if reaches footer if (fixedDivOffset > ($("#footer").offset().top - 30)) { $self.css('margin-top', -(fixedDivOffset - $("#footer").offset().top)); } else { $self.css('margin-top', '30px'); } });#container { width: 600px; } #text { width: 200px; padding: 10px; display: inline-block; vertical-align: top; } #fixedDiv { position: fixed; width: 100px; height: 175px; margin-top: 30px; background-color: #DB1926; color: white; padding: 10px; display: inline-block; vertical-align: top; } #footer { width: 90%; height: 700px; margin-top: 20px; background-color: #451870; color: white; padding: 10px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc scelerisque elit elit, ac aliquet augue congue id. Suspendisse hendrerit lorem quis ante fringilla, nec consequat nulla egestas. Praesent lobortis felis ut ex congue, at lobortis justo blandit. Praesent convallis metus et finibus venenatis. Phasellus et sapien at augue porta venenatis. Phasellus justo turpis, tempus ut eros sit amet, tristique iaculis lectus. Curabitur facilisis dolor nibh, rutrum accumsan lacus suscipit et. Nulla ut ornare ante, eu pellentesque odio. Pellentesque non facilisis felis. Sed congue arcu at turpis finibus, non facilisis sapien pretium. Nulla finibus cursus hendrerit. Cras nec neque at ipsum lobortis accumsan id at sem. Donec dignissim, velit id interdum ornare, magna augue suscipit risus, ut iaculis eros urna ut orci.</div> <div id="fixedDiv">fixedDiv</div> </div> <div id="footer">Footer. The fixedDIv should not scroll over this Footer.</div>My attempt in vanilla JS (tested on Chrome and Firefox)
Note, this implementation is just a proof of concept and should be adjusted in order to properly work on different older browser. I tried to improve the performance by debouncing the scroll event (the requestAnimationFrame performs the check while the user is scrolling)
When the fixed div reaches the footer a class is toggled and the element turns so that position: absolute is set via CSS (I've done some minor tweaks on the style also for the footer)
Javascript
(function(div, footer) { var idleScrolling = true, scrollTop = 0, intvScrolling; var fr = footer.getBoundingClientRect(); var dr = div.getBoundingClientRect(); var checkFixedDivPosition = function() { var bottomEdge; if (!idleScrolling) { /* user is scrolling, get the scrollTop position */ scrollTop = document.documentElement.scrollTop || document.body.scrollTop; bottomEdge = dr.top + dr.height + scrollTop; div.classList.toggle('absolute', bottomEdge >= fr.top); /* set timeout to detect the end of the scroll and to avoid useless computation */ intvScrolling = setTimeout(function() { idleScrolling = true; }, 250); window.requestAnimationFrame(checkFixedDivPosition); } }; window.addEventListener('scroll', function() { /* clear timeout */ clearInterval(intvScrolling); intvScrolling = null; /* if the user starts to scroll then check elements */ if (idleScrolling) { idleScrolling = false; checkFixedDivPosition(); } idleScrolling = false; }); }( document.getElementById("fixedDiv"), document.getElementById("footer") )); Timeline snapshots (while scrolling)
Vanilla-JS (debounced) approach:
FPS is generally high (green step function) painting and rendering events are minimal. Also the javascript area (yellow) is reasonably small. The red blocks above FPS are long (junk) frames
jQuery approach (for comparison)
scroll event, take carefully look on the browser timeline panel, so to be sure the computation is not too much intensiveSimply change position: fixed; to position: absolute;. This will set your content to be positioned at a absolute position, according to your parental container. Here's an edited fiddle of yours with just that one line changed.
