2

Como faço para mostrar uma div só depois do scroll passar um certo #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>

queria que este bocado de código apenas aparece-se quando o scrool passa-se por aquie que fica-se fixa ao topo com a class "navbar-fixed-top"

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

1 Resposta 1

3

Primeiro passo

Saber qual a posição da parte de baixo do seu elemento em relação ao topo da página:

//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();

Logo, para conseguirmos a posição da parte de quando acaba seu elemento em relação ao topo da página devemos somar os valores

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

Segundo Passo

Verificar qual a posição do topo do seu viewport em relação ao topo da página:

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

Terceiro Passo

Agora devemos aplicar as informações no evento Scroll do jquery, caso a posição do scroll for maior que o fim do seu elemento a class deve ser adicionada a sua barra de navegação

  $(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');
      }
  });

Código no JSFiddle demonstrando a aplicação:
http://jsfiddle.net/xfhhr02e/

1
  • Muito obrigado, explicação perfeita :D Commented 17/07/2015 às 8:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .