конфликт с событием прокрутки в jQuery

Question

У меня есть заголовок, который отображается в прокрутке и фиксирован, но на странице продуктов я также хочу, чтобы навигация фиксировалась, когда она прокручивается до определенной точки. Проблема, с которой я сталкиваюсь, заключается в том, что они являются одним и тем же событием. Поэтому я включаю навигационный код с кодом заголовка в одно и то же событие, но это означает, что когда я нахожусь на страницах, отличных от страницы продуктов, действие больше не работает, так как оно не может найти элементы на странице продукта. Если я делаю их отдельно, он конфликтует с одним и тем же событием.

Я могу сделать это с помощью скрипта на странице с использованием кода на стороне сервера, но мне было интересно, есть ли способ обойти его, если он все еще находится в JS-файле.

height2 = $('#product_nav_cont').offset().top; 
header2 = $('#scroll_header_cont').outerHeight(); 
empty_div = "<div class='empty_div' style='width:100%; height:"+header2+"px; display:block;' ></div>"; 
$(window).scroll(function() { 
    height = $('#main_header_nav_cont').outerHeight(); 
    scroll = $(this).scrollTop(); 
    if(scroll > height) { 
     $('#scroll_header_cont').fadeIn(400); 
    } else { 
     $('#scroll_header_cont').stop().hide(); 
    } 

    scroll2 = $(this).scrollTop(); 
    pos2 = height2-header2 
    //$('#scroll_logo').text(height) 
    if(scroll2 > pos2) { 
     $('#product_nav_cont').css({'position':'fixed','top':header2,'width':'100%'}); 
     if(!$('.empty_div').length) { 
      $('#main_header_nav_cont').after(empty_div); 
     } 
    } else { 
     $('#product_nav_cont').css({'position':'static','top':'0'}); 
     $(".empty_div").remove(); 
    } 

}); 

Answer 1

Почему бы вам не проверить, если элемент присутствует на странице:

$(window).scroll(function() { 

    if (document.getElementById('main_header_nav_cont')) //check if this element is on the page. If not it returns null and it won't execute this if clause. 
    { 
     height = $('#main_header_nav_cont').outerHeight(); 
     scroll = $(this).scrollTop(); 
     if(scroll > height) { 
      $('#scroll_header_cont').fadeIn(400); 
     } else { 
      $('#scroll_header_cont').stop().hide(); 
     } 
    } 
    scroll2 = $(this).scrollTop(); 

    //$('#scroll_logo').text(height) 
    if (document.getElementById('product_nav_cont')) //same thing here 
    { 
     pos2 = height2-header2; 
     height2 = $('#product_nav_cont').offset().top; 
     if(scroll2 > pos2) { 
      $('#product_nav_cont').css({'position':'fixed','top':header2,'width':'100%'}); 
      if(!$('.empty_div').length) { 
       $('#main_header_nav_cont').after(empty_div); 
      } 
     } else { 
      $('#product_nav_cont').css({'position':'static','top':'0'}); 
      $(".empty_div").remove(); 
     } 
    } 
});