Fixed menu on scroll with unknown height of previous elements

Question

I'm searching for a way to fix a menu on top when user scroll past certain height.

The thing is I can't just use if ($(window).scrollTop() > 70){ because the height of the elements before the menu is variable.

The page layout is something like:

* Banner <-- This is a variable height banner
* Menu
* Content

I could read on domready the menu's y position but I also need to take into account browser resizing as the banner height could be changed by some media queries.

What would be the best way to accomplish this?

Answer 1

You can use this in your script

$(window).scroll(function() {
    if ($(".menu").offset().top > 100) {
        $(".menu").addClass("scrolling-nav-header");
    }
    else {
        $(".menu").removeClass("scrolling-nav-header")
    }
});

and your css will have the functionality for this class="scrolling-nav-header" you want. something like this:

menu.scrolling-nav-header{
    position:absolute;
    top:0;
    left:0;
}

Answer 2

Set the absolute offset top of the scrollable header to the container (window) scroll value when this is greater than the relative header offset. Would be something like this:

 $(document).ready(function () { var scrollheader = $('.scrollheader'), scrollcontainer = $(window); var scrolling, shY; (function updateOffsetTop() { if (!scrolling) {shY = scrollheader.offset().top;} scrolling = false; setTimeout(updateOffsetTop, 5000); // Define lapse to update the height above. })(); scrollcontainer.scroll(function() { var wsY = $(this).scrollTop(); if (wsY > shY) { scrollheader.offset({top: wsY}); } else { scrollheader.css({top: 0}); } scrolling = true; }); scrollcontainer.trigger('scroll'); }); 

 .scrollheader { position: relative; background-color: #000000; color: #ffffff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Stuff before<br/>More stuff before<br/>Stuff before<br/>More stuff before<br/> Stuff before<br/>More stuff before<br/>Stuff before<br/>More stuff before<br/> <div class="scrollheader">Scroll Header</div> Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/> Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/> Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/> Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/> Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/> Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/> Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/> Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/> 

Note: Updated to check periodically changes of the content height above the header.