Show div only after passing a second section

Question

How do I show a div only after the scroll passes a certain #id?

<div class="row" id="menufixo"> <!-- TODO ADICIONAR CLASS navbar-fixed-top PARA MANTER MENU NO TOPO -->
                <div class="col-md-12">
                <div class="navbar-header menufixo">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menufixo">
                        <span class="sr-only">Toggle navigation</span>
                        <i class="fa fa-bars">MENU</i>
                    </button>
                    <div class="col-md-3">
                    <a class="navbar-brand" rel="home" href="#" title="foCAs">
                        <img  src="./imagens/logo.png" class="img-responsive img-center"/>
                    </a>
                    </div>
                    <div class="col-md-9">
                        <div class="collapse navbar-collapse" id="#menufixo">
                        <ul class="nav navbar-nav">
                            <li><a href="#" class="district">DISTRICT</a></li>
                            <li><a>|</a></li>                                                   
                            <li><a href="#" class="localecossystem">LOCAL ECOSSYSTEM</a></li>
                            <li><a>|</a></li>                   
                            <li><a href="#" class="lifeindistrict">LIFE IN DISTRICT</a></li>
                            <li><a>|</a></li>                  
                            <li><a href="#" class="agenda">AGENDA</a></li>
                            <li><a>|</a></li>                   
                            <li><a href="#" class="usefulinformation">USEFUL INFORMATION</a></li>
                            <li><a>|</a></li>                  
                            <li><a href="#" class="pt">PT</a></li>
                            <li><a href="#" class="en">EN</a></li>
                        </ul>
                    </div>
                    </div>                      
                </div>                  
            </div>                          
            </div>

wanted this piece of code only appears when the scrool passes through here that gets fixed to the top with the class "navbar-Fixed-top"

<div class="container-fluid" id="district">

Answer 1

First step

Know your item’s bottom position relative to the top of the page:

//retorna o offset da parte de cima do elemento em relação ao topo
$('#district').offset().top;

//retorna a altura do seu elemento
$('#district').height();

Therefore, in order to get the position of the part of when it finishes its element in relation to the top of the page we must add the values

var posElem = $('#district').offset().top + $('#district').height() ;

Second Step

Check the position of the top of your viewport relative to the top of the page:

var scr = $(window).scrollTop();

Third Step

Now we must apply the information in jquery’s Scroll event, if the scroll position is greater than the end of your element the class should be added to your navigation bar

  $(window).scroll(function() { 
      scr = $(window).scrollTop();      

      if(parseInt(posElem) < parseInt(scr)){
          $('#SeuNavBar').addClass('navbar-fixed-top');
      }
      if(parseInt(posElem) > parseInt(scr)){
          $('#SeuNavBar').removeClass('navbar-fixed-top');
      }
  });

Code in Jsfiddle demonstrating the application:
http://jsfiddle.net/xfhhr02e/