2014-02-17 2 views
0

Как я могу установить «боковую панель» в фиксированную позицию, когда она достигает «Исправлен заголовок», а не верх страницы?позиция div фиксирована на прокрутке, начало в верхней части страницы

jsfiddle

$(function() { 
    var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0)); 
    var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0)); 

    var maxY = footTop - $('#sidebar').outerHeight(); 

    $(window).scroll(function(evt) { 
     var y = $(this).scrollTop(); 
     if (y > top) { 
      if (y < maxY) { 
       $('#sidebar').addClass('fixed').removeAttr('style'); 
      } else { 
       $('#sidebar').removeClass('fixed').css({ 
        position: 'absolute', 
        top: (maxY - top) + 'px' 
       }); 
      } 
     } else { 
      $('#sidebar').removeClass('fixed'); 
     } 
    }); 
}); 
+0

Вы только что нужно сделать что-то вроде 'у> (сверху -. $ ('# FixedHeader') высота())' – MLeFevre

+0

хорошо, где именно я должен писать? –

ответ

2

Эта линия:

if (y > top) { 

предполагается, что ваш фиксированный заголовок не имеет отступы (в противном случае вы должны принять это во внимание, а) вы могли бы изменить к этому

if (y >= top - $('#fixedHeader').height()) { 

Убрать top:0px; из боковой панели CSS, и добавить ожидаемую высоту для вашего фиксированного заголовка (в настоящее время вы дали ему высоту 40px), так

#sidebar.fixed { 
    position: fixed; 
    top: 40px; 
} 

Я также удалял отступы от вашего #fixedHeader, как вы Бесполезная Не указывайте, что это было или если вы даже хотели. Если вы хотите заполнить, как уже упоминалось выше, вам придется добавить это и в свой расчет.

http://jsfiddle.net/VtPcm/706/

+0

Спасибо, он отлично работает –

Смежные вопросы