Verifique se $(document).scrollTop()
retorna 0. Se retornar 0, é porque está no topo da página. Se não quiser usar o jQuery, use document.documentElement.scrollTop
.
Se a página estiver no topo, esconder a <div id="um-id">
, mas se rolar a página para baixo, a div
aparecer.
O evento scroll
pode ser usado para isso. Veja no código abaixo:
$(document).scroll(function() {
$("#um-id").toggle($(document).scrollTop() !== 0);
});
.bla {
height: 200px;
}
#um-id {
background-color: red;
position: fixed;
display: none;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="um-id">Teste</div>
<p class="bla">blablablabla</p>
<p class="bla">dadadada</p>
<p class="bla">qwaqwqaqwqa</p>
Se a página carregar e rolar diretamente para um elemento com id
, como exemplo.com/#rodape
e em seguida o usuário, rolar para o topo, um alerta aparecer.
Nesse daqui, tem que usar a propriedade elemento.offset().top
para dar uma ajudinha. Veja o código abaixo:
var rodape = $("#rodape");
$(document).scrollTop(rodape.offset().top);
$(document).scroll(function() {
$("#alerta").toggle($(document).scrollTop() < rodape.offset().top);
});
.bla {
height: 200px;
}
#alerta {
background-color: red;
position: fixed;
display: none;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="alerta">Teste</div>
<p class="bla">blablablabla</p>
<p class="bla">dadadada</p>
<p class="bla" id="rodape">AQUI!</p>
<p class="bla">qwaqwqaqwqa</p>