Position fixed on scroll starts before it reaches the top (top div)

I have now so that #filter (my sidebar white select list) becomes fixed when it reaches the top and stay there during the scrolling until it reaches the foot and releases.

My problem is that I have a <div> box in the head that is positioned fixed, so #filter will not be fixed from the get to the top of the page. which means that I get a snatch before it attaches to position fixed. How can I get it to become fixed 40px before reaching the top?

jsfiddle

$(function() {
    var top = $('#filter').offset().top,
        footTop = $('#outside_footer_wrapper').offset().top,
        maxY = footTop - $('#filter').outerHeight();
        console.log(top , footTop, maxY);

    $(window).scroll(function(evt) {
        var y = $(this).scrollTop();
        console.log(y);
        if (y > top) {
            console.log('mayor');
            $('#filter').addClass('fixed').removeAttr('style');
            if (y > maxY-130){
                var min = y - maxY + 130;
                console.log('mayor y menor', min);
                $('#filter').css('top','-'+min+'px');
            }
        } else {
            $('#filter').removeClass('fixed');
        }

    });
});

Answers


Add/change the if statement to this:

console.log(y);
if (y >= (top-y)) {

Here's the link jsfiddle

UPDATE

Change it back to this $('#filter').css('top','-'+min+'px');

updated jsfiddle


Need Your Help

WindowsAzure.Storage using C# mono

c# azure sdk mono

Im trying to connect and download from AzureStorage blob which I manage to do using windows while writing in C#.

Best way to test if a generic type is a string? (C#)

c# generics

I have a generic class that should allow any type, primitive or otherwise. The only problem with this is using default(T). When you call default on a value type or a string, it initializes it to a