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 );
} ...
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..css()
em vez de animate:$("#parte3").css("display", "block");
. Se quiseres fazer uma transição tens de usarvisibility
ou$("#parte3").fadeIn()