How to insert declared CSS with Javascript after scrolling the page

Question

How to insert declared CSS with Javascript after scrolling the page

Asked 8 years, 7 months ago

Viewed 412 times

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 doesn’t work at all, and it seems to be right!

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 on the end:

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

But it doesn’t spin at all.

tried as well:

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

and so on...

because your variables are with $ in front of the name?

– DiChrist

2016/02/18 at 18:13
variable declaration in JS does not have? The.o

– Josias Viskoo

2016/02/18 at 18:14
I removed " . " from the class in variable. I tested and worked here.

– Ricardo

2016/02/18 at 18:15
Maybe it’s browser then... (firefox)

– Josias Viskoo

2016/02/18 at 18:16
if you give a console.log( $Document.scrollTop() does it show or not? Inside $Document.scroll(Function() {

– André Vicente

2016/02/18 at 18:18
in php has, js do not know this need.(I may be wrong). I use $ to select tags(elements) html

– DiChrist

2016/02/18 at 18:18
thus? var Document = $(Document), element = $('#myDiv'), classname = 'test-css';

– Josias Viskoo

2016/02/18 at 18:19
@Andrévicente does not show

– Josias Viskoo

2016/02/18 at 18:24
So the problem is that even the scroll is not identifying, it is not the class name. Give some error in the browser console?

– André Vicente

2016/02/18 at 18:33
@Andrévicente Humm... gives error yes : no element found e04b:1:1 Typeerror: Document.getElementById(...) is null overlay.js:7333:5 Typeerror: aRequestOrigin is null policy.js:94:5 Typeerror: Document.getElementById(...) is null overlay.js:7333:5
TypeError: browserElement is null
 overlay.js:7615:3
TypeError: aRequestOrigin is null policy.js:94:5
TypeError: document.getElementById(...) is null
 overlay.js:7333:5
TypeError: aRequestOrigin is null

– Josias Viskoo

2016/02/18 at 18:41
I believe I’m not finding the elements. I play everything inside the $( document ).ready(function() { //joga seu código jquery aqui });

– André Vicente

2016/02/18 at 18:46
Referenceerror: $ is not defined

– Josias Viskoo

2016/02/18 at 18:48
Did not spin... <script>
 
 
 $( document ).ready(function() { 
 
 var $document = $(document),
 element = $('#minhaDiv'),
 className = 'teste-css';
$document.scroll(function() {
 if ($document.scrollTop() >= 5) {
 // user scrolled 50 pixels or more;
 // do stuff
 $element.addClass(className);
 } else {
 $element.removeClass(className);
 }
}); 
 
 });
 
 
 </script>

– Josias Viskoo

2016/02/18 at 18:50
Makes a mistake ReferenceError: $ is not defined and points to that line saying you’re in error $(document).ready(function() {

– Josias Viskoo

2016/02/18 at 19:00
Check it out: https://jsfiddle.net/pmqnnjpm/

– Ricardo

2016/02/18 at 19:22
It ran right... but then it’s complicated in my ". php"... I’ll test without other page codes...

– Josias Viskoo

2016/02/18 at 19:24

Show 11 more comments

1 answer

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.

by Renan Gomes • **19,011** points · Answer 1 · 2016-02-18T19:28:55+00:00

Before answering the question, a note about what was said in the comments: Javascript variable statements do not need the $ in the front. As far as I know, this is a way that developers have adopted to make it easier to read code, distinguishing that variable is an element of the DOM. In the same way that they use variables with upper-case name 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 run Jquery has not yet been loaded.

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

Your code would look 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>