1

Bom, só queria fazer funcionar a função javascript:

var $document = $(document),
    $element = $('#minhaDiv'),
    className = '.teste-css';

$document.scroll(function() {
  if ($document.scrollTop() >= 5) {
$element.addClass(className);
  } else {
    $element.removeClass(className);
  }
});  

Mas não funciona de forma alguma, e parece estar correto!

Usei:

<div id="minhaDiv" class=""><br><br><br>...<br><br><br><br><br><br><h1>Teste2</h1></div>

e no css

<style>
  .teste-css
{
  color: red;
}
</style>

e coloquei no final:

<!-- jQuery -->
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Mas não roda de forma alguma.

tentei também:

  className = '.teste-css'; //CLASS
  className = 'teste-css';  //TAG
  className = '#teste-css'; //ID

e por ai vai...rs

scree

16
  • porque suas variáveis estão com $ na frente do nome?
    – DiChrist
    Commented 18/02/2016 às 18:13
  • a declaração de variável no JS não tem? O.o Commented 18/02/2016 às 18:14
  • Retirei o " . " da classe na variável. Testei e funcionou aqui.
    – Ricardo
    Commented 18/02/2016 às 18:15
  • Talvez é navegador então... (firefox) Commented 18/02/2016 às 18:16
  • se vc der um console.log( $document.scrollTop() ) ele mostra ou não? Dentro do $document.scroll(function() { Commented 18/02/2016 às 18:18

1 Resposta 1

1

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>

2
  • Matou a resposta Renan! Nossa! Eu não sabia que a sequencia de implementação dependia uma da outra... nossa que coisa!rs mudei a ordem do JQUERY com a função e rodou... O.o Você e todos os outros amigos! Muito obrigado!! Obrigado mesmo!! Commented 18/02/2016 às 19:42
  • 1
    Kara, obrigado, legal, já está marcada, muito obrigado!! sou novo aqui!! valeu!! Commented 23/02/2016 às 20:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .