Fixed Bottom Menu/Scroll to Top Issue

Take a look at this page for me. I’m having trouble diagnosing why the menu bar when scrolled to a fixed position at the top is halfway hidden before it pops into place.

I do get a response from Firefox saying:
“This site appears to use a scroll-linked positioning effect.This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!”, but that seems more like a warning than an error.

The code I’m using:

<script>
jQuery(function($) {
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$(".et-l.et-l--header").css("position","absolute").css("top","auto").css("bottom",0).css("z-index","99999");
} else {
$(".et-l.et-l--header").css("position","fixed").css("bottom","auto").css("top",0).css("z-index","99999");
}
});
});
</script>

Seems simple enough and shouldn’t cause the element to be hidden upon scroll for a short while.
Thank you.

I’ve found adding a min-height: 100vh to the section header seems to have solved that problem.

You could have just used position:sticky and no js :slight_smile:

1 Like