固定的滚动顶部菜单不允许到达屏幕底部

Question

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 a scroll, but not high enough to cover up all the menu, the screen bounces and doesn't allow me to reach the bottom (the scroll jumps up again, no matter what).

I was able to simulate the behavior here: http://jsfiddle.net/thiagoprzy/0kkx9tsb/

I believe the issue relies on the way I created the JS part, but when I searched about alternative solutions, almost all of them were very very similar to this one.

PS: My screen resolution is 1650x1050, so if you have a tinier resolution, maybe you'll need to change the .container height value in order to reproduce the issue.

Answer 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

Answer 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. =)