How to stop fixed position when footer come in view and move that fixed div to just above the footer

I create one page and menu on the left side when I do scroll then menu is fixed but when footer comes in the view then fixed position change it and I want that menu to comes just above the footer and scroll as much as footer height and again get position fixed when footer went out of the view.
I try this and I did 90% percent work but I not able to find that when menu position is absolute then how to give top value so it automatically comes to footer when footer comes in view.
I have an example for your understanding that I want menu functioning like this only. The site is www.industrybuying.com

my jquery code is below and my work is this http://bulkstore.msmemart.in/bulkstore-b2b-new-homepage/

The problem is that I am not able to know how to get this top value ( ‘top’: (top_of_screen + bottom_of_element) ‘px’} ) dynamically according to window size{means it has to work for small medium and large all screen resolution. }

Please help me, I trying this thing more than two weeks but I didn’t get any solution.
Thank you.

jQuery(document).ready(function(){ 

var bottom = jQuery('.left-side-data').offset().top;
jQuery(window).scroll(function(){    
    if (jQuery(this).scrollTop() > bottom){ 
        jQuery('.left-side-data').addClass('fixed');
    }
    else{
        jQuery('.left-side-data').removeClass('fixed');
    }
	//console.log(jQuery('.right-side-data')[0].scrollHeight);
    var top_of_element = jQuery(".ma-footer-static").offset().top;
    var bottom_of_element = jQuery(".ma-footer-static").offset().top + jQuery(".ma-footer-static").outerHeight();
    var bottom_of_screen = jQuery(window).scrollTop() + jQuery(window).height();
    var top_of_screen = jQuery(window).scrollTop();

    if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
        // The element is visible, do something
		jQuery('.left-side-data.fixed').css({'position': 'absolute', 'top': (top_of_screen + bottom_of_element) 'px'});
		jQuery('.left-side-data.fixed').removeClass('fixed');
    }
    else {
        // The element is not visible, do something else
		jQuery('.left-side-data').css({'position': 'fixed', 'top': '68px'})
		jQuery('.left-side-data').removeClass('removefixed');
		if (jQuery(this).scrollTop() > bottom){ 
			jQuery('.left-side-data').addClass('fixed');
		}
		else{
			jQuery('.left-side-data').removeClass('fixed');
		}
    }
});

});

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.