Currently, I have implemented a feature where #filter (the white select list in my sidebar) becomes fixed when it reaches the top of the page and stays there while scrolling until it reaches the footer and is released.
However, I encountered an issue with a <div> box at the top that is also positioned as fixed,
causing #filter to not become fixed immediately when reaching the top of the page.
This results in a sudden jolt before it finally attaches itself in the fixed position.
Is there a way to make #filter become fixed 40px before reaching the very top?
$(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('greater');
$('#filter').addClass('fixed').removeAttr('style');
if (y > maxY-130){
var min = y - maxY + 130;
console.log('greater and less', min);
$('#filter').css('top','-'+min+'px');
}
} else {
$('#filter').removeClass('fixed');
}
});
});