в режиме реального времени обновления абсолютного позиционируется ДИВ при прокрутке

Question

Позвольте мне объяснить ситуацию:

Существует относительное расположен sidebar. После прокрутки вверху main-content эта боковая панель меняет на абсолютный и затем обновляется в реальном времени до верхнего положения в окне (scrollTop окна).

Проблема в том, что она очень медленная и прерывистая (в Firefox), потому что она обновляется все время. Как я могу обновить позицию «в режиме реального времени» без нагрузки?

В настоящее время это выглядит следующим образом:

var headerOffset = $('#main-content').offset().top; 
$(document).on('scroll', function() { 
    if(($(document).scrollTop() + 15) > $('#main-content').offset().top){ 
    $('#sidebar').addClass('fixed'); 
    $('#sidebar').css('top', ($(document).scrollTop() - headerOffset) + 15); 
    } else { 
    $('#sidebar').removeClass('fixed'); 
    } 
}); 

Заранее спасибо :)

Answer 1

Если вы хотите сделать все Javascript-hassle, потому что у вас есть непредсказуемые заголовки и не знаете точное положение основного содержимого, которое было достаточно, чтобы установить ccs в фиксированное состояние и просто вычислить позицию при запуске.

var headerOffset = $('#main-content').offset().top; 
$('#sidebar').css('top', headerOffset); 

как здесь: http://jsfiddle.net/4amdr/

Вот единственный способ, я могу себе представить, почему вы не хотите использовать неподвижную верхнюю часть и оставить JS вне.

Answer 2

вы должны использовать наклеить из Twitter Bootstrap: Bootstrap's affix

Answer 3

Что об этом:

=>http://jsfiddle.net/8XVXj/1/ или полный пример: http://jsfiddle.net/8XVXj/2/

var headerOffset = $('#main-content').offset().top; 
$(document).on('scroll', function(){ 
if(($(document).scrollTop() + 15) > $('#main-content').offset().top){ 
    if($('#sidebar').hasClass('fixed') === false) { 
    $('#sidebar').addClass('fixed'); 
    $('#sidebar').css('top', ($(document).scrollTop() - headerOffset) + 15); 
    } 
} else { 
    $('#sidebar').removeClass('fixed'); 
} 
}); 

Я добавляю только один раз фиксированное положение.