JQuery только запускается, если на странице существует div # sidebar

Question

Я использую следующий код для управления div с идентификатором 'sidebar'

var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
            $(window).scroll(function (event) {
                // what the y position of the scroll is
                var y = $(this).scrollTop();

                // whether that's below the form
                if (y >= top) {
                  // if so, ad the fixed class
                  $('#sidebar').addClass('fixed');
                } else {
                  // otherwise remove it
                  $('#sidebar').removeClass('fixed');
                }
              });

Однако, когда страница с одами не содержит div # sidebar, она выдает ошибку о том, что #sidebar имеет значение null (потому что его там нет!)

Как я могу преобразовать этот код только в том случае, если на странице есть боковая панель div #?

Answer 1

Вы можете уменьшить свой код, используя .length, чтобы проверить, существует ли он, и кэшировать селектор, как это:

var sb = $('#sidebar');
if(sb.length) {
  var top = sb.offset().top - parseFloat(sb.css('marginTop').replace(/auto/, 0));
  $(window).scroll(function () {
    sb.toggleClass('fixed', $(this).scrollTop() >= top);
  });
}​

.length возвращает количество элементов, найденных селектором, если его там нет, это будет 0 или false для целей нашей проверки if(). После этого мы используем .toggleClass(class, bool) для более краткого добавления или удаления класса на основе позиции прокрутки.

Answer 2

Если я не ошибаюсь, вы можете использовать

if ($('#sidebar').length > 0){

   .............

}

для достижения этого.

Answer 3

if($('#sidebar').length > 0)
{
 //your code here
}

Answer 4

Вы можете попробовать это.

if($('#sidebar').size > 0){

//your code

}