Show div only after passing a second section

Navigation
2

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>

I wanted this bit of code to appear only when scrool passes through it, which is fixed to the top with the class "navbar-fixed-top" 

<div class="container-fluid" id="district">
    
asked by anonymous 16.07.2015 / 18:00

1 answer

3

First step

Learn the position of the bottom of your element from 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();

Then, to get the position of the part of when your element ends with respect to the top of the page we must add the values 

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

Second Step

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

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

Third Step

Now we must apply the information in the jquery scroll event, if the scroll position is greater than the end of its element the class should be added to its 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:
link

    
16.07.2015 / 19:03
Return columns that accept boolean in a table MySql insert with "Connection" between inserts