How to insert CSS declared with Javascript after page scroll

Question

How to insert CSS declared with Javascript after page scroll

Navigation

#1 by (1 votes)

1

Well, I just wanted to make the javascript function work:

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

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

But it does not work at all, and it seems to be correct!

I used:

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

and in css

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

and put it at the end:

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

Butitdoesnotrunatall.

Ialsotried:

className='.teste-css';//CLASSclassName='teste-css';//TAGclassName='#teste-css';//ID

Andsoitgoes...rs

javascript css

asked by anonymous 18.02.2016 / 19:05

1 answer

Creating and using Libraries in Laravel 5.1 How to find out the size of an array of characters?

score 1 · Accepted Answer

Before answering the question, a note about what was said in the comments: Javascript variable declarations do not need $ up front. As far as I know, this is a form that developers have adopted to make it easier to read the code, distinguishing that variable is a DOM element. In the same way that they use variables with name in box as convention for constants in some languages.

// Você 'bate o olho' e sabe que '$foo' é algum elemento no documento.
$foo.insertAdjacentHTML('afterend', '<p> olá </p>');

In your case, the problem is that you are running a script that depends on jQuery, but when it is executed JQuery has not yet been loaded.

Another problem is that you are entering the value of className in the function addClass() . The value has . before the class name and this is not necessary, jQuery will try to add a class named ..teste-css and it will never work. addClass already knows that a class will be inserted, so it is not necessary to point, only the class name ( teste-css ).

Your code looks like this:

<!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>