Change CSS element with JQuery when scroll reaches an anchor point

Question

I currently have this solution to change the css elements when the page reaches a certain point but I\'d like to use an #anchor-point instead of the pixel value (1804) to be

Answer 1

$(window).bind("scroll", function() { 
   var $sec1 = $('.bg1').offset().top;
     var $sec2 = $('.bg2').offset().top;
     var $sec3 = $('.bg3').offset().top;
   var $sec4 = $('.bg4').offset().top; 
   var $sec5 = $('.carousel-indicators').offset().top;   

   if ($(this).scrollTop() < $sec2){ 
     $(".navbar1").fadeOut();  
     $(".navbar2").fadeOut();  
     $(".navbar3").fadeOut();  
   }     
   if ($(this).scrollTop() > $sec2 & $(this).scrollTop() < $sec3){ 
     $(".navbar1").fadeIn();   
     $(".navbar2").fadeOut();      
   } 
   if ($(this).scrollTop() > $sec3 & $(this).scrollTop() < $sec4){ 
     $(".navbar2").fadeIn();  
     $(".navbar3").fadeOut();  
   }    
   if ($(this).scrollTop() > $sec4 & $(this).scrollTop() < $sec5){ 
     $(".navbar3").fadeIn();  
     $(".navbar2").fadeOut();  
   }    
   if ($(this).scrollTop() > $sec5){ 
     $(".navbar1").fadeOut();  
     $(".navbar2").fadeOut();  
     $(".navbar3").fadeOut();   
   }         
 });