Добрый день. Есть див, который прилипает к верху страницы, но при прокрутке залазит на футтер. Как можно ограничить его прокрутку, может, указать высоту или как-то сказать ему стоп? Помогите, пожалуйста. Вот схематический рисунок, как должно быть:
$(document).ready(function() {
var search_bar = $('#my_search_bar');
var margin = 15;
var borderY = search_bar.offset().top - margin;
$(window).bind('scroll', function()
{
var currentY = $(document).scrollTop();
if(currentY > borderY)
{
search_bar.css({position: 'fixed', top: margin + 'px'});
}
else if(currentY < borderY)
{
search_bar.css({position: '', top: ''});
}
});
});
Получилось таким образом:
var topPos = $('#my_search_bar').offset().top;
$(window).scroll(function() {
var top = $(document).scrollTop(),
pip = $('.footer').offset().top;
height = $('#my_search_bar').outerHeight();
if (top > topPos && top < pip - height) {$('#my_search_bar').addClass('fixed').removeAttr("style");}
else if (top > pip - height) {$('#my_search_bar').removeClass('fixed').css({'position':'absolute','bottom':'400px'});}
else {$('#my_search_bar').removeClass('fixed');}
})
;