2013-07-07 3 views
0

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

В качестве теста я попытался просто поменять его на пустое. Но это не имеет никакого влияния.

<script type="text/javascript"> 
    var side_offset_top = $('#side').offset().top; 
    var side = function(){ 
     var scroll_top = $(window).scrollTop(); 
     if (scroll_top > side_offset_top) { 
      document.getElementById('side').innerHTML = ''; //blank to test 
     } else { 
     } 
    }; 
    side(); 
    $(window).scroll(function() { 
     side(); 
    }); 
}); 
</script> 

Я новичок в JavaScript, поэтому я был бы признателен, если кто-нибудь поможет мне в этом.

ответ

0

Я предполагаю, что вы используете JQuery, так как я вижу $

Существует дополнительный }); на последней строке кода так, если это ошибка копирования пасты, вы должны удалить это.

Затем попробуйте поместить код внутри обработчика $ (document) .ready(). $ ('# side') может быть не в DOM еще, когда вы проверяете его смещение.

Что-то вроде (непроверенные):

$(document).ready(function(){ 
    var side_offset_top = $('#side').offset() && $('#side').offset().top; 
    var side = function(){ 
     var scroll_top = $(window).scrollTop(); 
     if (scroll_top > side_offset_top) { 
      $('#side').html(''); // using jQuery .html 
     } 
    }; 
    side(); 
    $(window).on('scroll', function() { // consider using .on here instead 
     side(); 
    }); 
}); 

EDIT: упс! offset(). top() должно быть смещено(). top

+0

Спасибо, но это все еще не работает. Элементы «div» двух боковых панелей прокручивают верхнюю часть фиксированной навигации (по горизонтали сверху), хотя цвет фона '# side' как бы отстает. – OJFord

+0

Я только что исправил ошибку в образце кода и протестировал ее - обновленная версия работает для меня. Если я делаю div с идентификатором стороны, когда div достигает верхней части окна, обновляется html – mcbex

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