In my project I want to fade in divs in html and I am using the following code

```js
$(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).offset().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);
           }
       }); 
    });
});
```

```css
#container {
    height:2000px;    
}

#container div { 
    margin:50px; 
    padding:50px; 
    background-color:lightgreen; 
}

.hideme {
    opacity:0;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/g/jquery.fullpage@2.5.9(jquery.fullPage.min.js+vendors/jquery.easings.min.js+vendors/jquery.slimscroll.min.js)"></script>
<link href="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.css" rel="stylesheet" />
<div id="container">
  <div>Hello</div>
  <div>Hello</div>
  <div>Hello</div>
  <div>Hello</div>
  <div>Hello</div>
  <div>Hello</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 class="hideme">Fade In</div>
</div>
```

which can be found at this [JS Fiddle](http://jsfiddle.net/tcloninger/e5qaD/)
In the project I also use the javascript code for

```
$(document).ready(function() {
    $('#fullpage').fullpage();
});

```

which basically makes the scrolling better, details at <https://github.com/alvarotrigo/fullPage.js/>

**The problem:** Because of the full page code the fading in function does not enter the scroll if condition.