Antes de responder a pergunta, uma observação sobre o que foi dito nos comentários: Declarações de variáveis em Javascript não precisam do $
na frente. Até onde sei, isso é uma forma que desenvolvedores adotaram para tornar mais fácil a leitura do código, distinguindo que aquela variável é um elemento do DOM. Da mesma forma que usam variáveis com nome em caixa alta como convenção para constantes em algumas linguagens.
// Você 'bate o olho' e sabe que '$foo' é algum elemento no documento.
$foo.insertAdjacentHTML('afterend', '<p> olá </p>');
No seu caso, o problema é que você está executando um script que depende do jQuery, porém quando este é executado o JQuery ainda não foi carregado.
Outro problema é que você está inserindo o valor de className
na função addClass()
. O valor possui um .
antes do nome da classe e isso não é necessário, o jQuery tentará adicionar uma classe com nome ..teste-css
e nunca funcionará. addClass
já sabe que será inserida uma classe, logo não é necessário o ponto, somente o nome da classe ( teste-css
).
Seu código ficaria assim:
<!doctype html>
<html>
<head>
<style>
.teste-css {
color: red;
}
</style>
</head>
<body>
<p>Desça a página</p>
<div id="minhaDiv" class="">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1>Teste2</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
var $document = $(document),
$element = $('#minhaDiv'),
className = 'teste-css';
$document.scroll(function(){
if($(this).scrollTop() >= 5)
$element.addClass(className);
else
$element.removeClass(className);
});
});
</script>
</body>
</html>