mudança div com base em quão baixo a página que você tiver rolado
-
05-07-2019 - |
Pergunta
Eu estou tentando mudar o texto dentro de uma div com base em quão baixo uma página que você tenha rolado. Fui mexer com scrollTop e documento altura do jQuery, mas até agora não conseguiu produzir os resultados desejados.
Como eu poderia obter a posição de um elemento na página e, em seguida, obter jQuery para fazer algo depois de ter rolado para essa posição elementos?
Ajuda é muito apreciada!
Solução
Houve uma pergunta sobre StackOverflow que pediu algo semelhante e eu chicoteado até um pequeno exemplo para ilustrar como fazer isso. Não consigo encontrar a questão agora, mas aqui está o exemplo . Neste exemplo, há uma div que é mostrado até que você vá até um certo elemento na página em que ponto o div está escondido. Você pode alterar isso para conseguir o que deseja, como a idéia é a mesma. Aqui está o código modificado para o que você precisa:
$(document).ready(function() {
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
var myelement = $('#formcontainer'); // the element to act on if viewable
$(window).scroll(function() {
if(isScrolledIntoView(myelement)) {
// do something when element is scrolled to and viewable
} else {
// do something when element is not viewable
}
});
});
Outras dicas
O bom e velho ppk de quirksmode.org pode mostrar-lhe como encontrar a posição de um elemento: "Este script encontra a posição real, então se você redimensionar a página e executar o script novamente, ele aponta para a nova posição correta do elemento."