Как ограничить прокрутку блока?

Рейтинг: 1Ответов: 1Опубликовано: 02.12.2014

Добрый день. Есть див, который прилипает к верху страницы, но при прокрутке залазит на футтер. Как можно ограничить его прокрутку, может, указать высоту или как-то сказать ему стоп? Помогите, пожалуйста. Вот схематический рисунок, как должно быть:

alt text

$(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');}
})

;

Ответы

▲ 2

В свое врем мне помогли. Вот один из примеров.