0

Quero que a div #parte3 fiquei display:block quando chegar no scrollTop = 1110. Minha sintaxe

console.log($(window).scrollTop(), $(window).scrollTop() > 1110);
    if ($(window).scrollTop() > 1110) {
        $("#parte3").animate("display", "block");
    };
6
  • Não consigo imaginar qual seria o sentido de animar a propriedade display, visto que não tem situações intermediárias. Mais fácil você explicar o resultado desejado do que o jeito que está tentando fazer. Não seria simplesmente .css( "display", "block" ) ? E fora isso, teria que colocar esse teste ao fazer o scroll, e devolver a propriedade para a original se for menor que 1110.
    – Largato
    Commented 12/01/2015 às 10:40
  • 1
    se possivel poste o resto do código html/css ou algum exemplo na internet. Commented 12/01/2015 às 10:41
  • Acho que deves usar .css() em vez de animate: $("#parte3").css("display", "block");. Se quiseres fazer uma transição tens de usar visibility ou $("#parte3").fadeIn()
    – Sergio
    Commented 12/01/2015 às 10:42
  • @Sergio eu gostaria de deixar um dalay até a div aparecer, não quero que seja um movimento rápido. Commented 12/01/2015 às 10:46
  • 1
    Qual é a diferença para esta outra pergunta que você fez em dezembro? O problema parece o mesmo, falta um listener para o evento de scroll.
    – bfavaretto
    Commented 14/01/2015 às 18:55

1 Resposta 1

5

Provavelmente é algo nesta linha que você precisa:

$(/* elemento desejado, ou simplesmente window */).bind('scroll', function() {
   if ($(window).scrollTop() >= 1110) {
      $("#parte3").css("display", "block");
   } else {                                  // use o else se quiser reverter ao subir.
      $("#parte3").css("display", "none");   // aqui ponha o display original.
   }
});


Se está falando de display:none, troque por opacity com animate (ou fadeTo, que é o jeito simples do jQuery).
EDIT: Como bem lembrado pelo @Sergio, se for pra mostrar 100%, basta usar .fadeIn().

$(window).bind('scroll', function() {
   if ($(window).scrollTop() >= 1110) {
      $( "#parte3" ).fadeTo( 500, .5 ); // velocidade, transparência
   } ...

Neste caso, não use display:none inicialmente, e sim opacity: 0.


E ainda, se desejar um temporizador antes do efeito, tem o .delay():

$(window).bind('scroll', function() {
   if ($(window).scrollTop() >= 1110) {
      $( "#parte3" ).delay( 500 ).fadeIn( 500 );
   } ...
3
  • excelente resposta, estou procurando algo desse gênero, tem como? tympanus.net/Development/GridLoadingEffects/index.html Commented 12/01/2015 às 17:57
  • @FelipeStoker eu acho que até ja vi alguem pedindo este mesmo efeito aqui, vou ver se acho o que era.
    – Largato
    Commented 12/01/2015 às 19:47
  • Não era bem isso que eu gostaria, e sim algo parecido com o plugin que postei em minha pergunta, gostaria que as <section> fossem aparecendo com o scroll do mouse. Commented 13/01/2015 às 10:18

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 .