Fixed Top Menu On Scroll Doesn't Allow To Reach Screen's Bottom

I have a strange behavior with my fixed top menu. The screen height is dynamic (depends on the number of registries retrived by the database). When the number of registries creates

Solution 1:

you need to use $('.content').offset().top instead of $('.floating-filter').offset().top or you can use

if ($(window).scrollTop() > $('.floating-filter').outerHeight(true)) {

So you can use

$(window).scroll(function () {
    if ($(window).scrollTop() > $('.content').offset().top) {
        $('.floating-filter').addClass('fixed');
    } else {
        $('.floating-filter').removeClass('fixed');
    }
});

Working Demo

Solution 2:

So, that's my solution: http://jsfiddle.net/thiagoprzy/0kkx9tsb/15/

Basically I gave up on position: fixed and used position: absolute. Then, I put the menu inside a wrapper with position: relative and, in $(document).ready() I set the wrapper's height the same as the menu. For last, I update the top value of the menu based on $(window).scrollTop() position inside $(window).scroll() event. Maybe it's not the most clean solution, but it solved my issue and now I'm happy. =)