Make animate with scrollTop

Question

Make animate with scrollTop

Navigation

#1 by (5 votes)

0

I want the div #parte3 to be display:block when you reach scrollTop = 1110 . My syntax

console.log($(window).scrollTop(), $(window).scrollTop() > 1110);
    if ($(window).scrollTop() > 1110) {
        $("#parte3").animate("display", "block");
    };

jquery

asked by anonymous 12.01.2015 / 11:20

1 answer

Select dynamic with JQuery Access a single page in multiple "pathname"

score 5 · Accepted Answer

It's probably something in this line that you need:

$(/* 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.
   }
});

If you are talking about display:none , switch to opacity with animate (or fadeTo, which is the simple way of jQuery). EDIT: As well remembered by @Sergio , if it is to show 100%, just use .fadeIn() .

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

In this case, do not use display:none initially, but opacity: 0 .

And if you want a timer before the effect, you have .delay() :

$(window).bind('scroll', function() {
   if ($(window).scrollTop() >= 1110) {
      $( "#parte3" ).delay( 500 ).fadeIn( 500 );
   } ...