Search code examples
jqueryonloadonscroll

Opacity onscroll, Script won't work

Hey guys im trying to achieve the onscroll functionality but it won't work on my site.

What am i doing wrong?

<head>
<script>
$(document).ready(function() {

/* Every time the window is scrolled ... */
$(window).scroll( function(){

/* Check the location of each desired element */
$('.hideme').each( function(i){

var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();

 /* If the object is completely visible in the window, fade it it */
 if( bottom_of_window > bottom_of_object ){

 $(this).animate({'opacity':'1'},500);

 }

 }); 

 });

});</script>
</head>

<body>

<div id="container">

<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>
<div class="hideme">Fade In</div>

</div>
</body>

And link to the Site for full code: http://eren-web-design-development.tk/C-Html/landingpage/

Solution

  • I'm seeing the error

    TypeError: $(...).ready is not a function

    in my console. I think $ is conflicting with some other library in your code. Anyway, try this and check if it is working:

    jQuery(document).ready(function($) {
..

}