Затухание в div в html с помощью javascript

В моем проекте я хочу исчезать в div в html, и я использую следующий код

$(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);
           }
       }); 
    });
});

#container {
    height:2000px;    
}

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

.hideme {
    opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/g/[email protected](jquery.fullPage.min.js+vendors/jquery.easings.min.js+vendors/jquery.slimscroll.min.js)"></script>
<link href="#" onclick="location.href='https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.css'; return false;" 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>

Ответ 1

Я думаю, что вы ищете что-то вроде этого JS Fiddle 1

JS:

//initialize
var winHeight = $(window).height(),
  sections = $('.sections'),
  currentSlide = 0;
$('html, body').animate({scrollTop: 0}, 0);

//hide elements not in the view as the page load for the first time
sections.each(function() {
  if ($(this).offset().top > winHeight - 5) {
    $(this).fadeOut(0);
  }
});

//show elements on scroll
$(window).scroll(function(event) {

  // retrieve the window scroll position, and fade in the 2nd next section 
  // that its offset top value is less than the scroll
  scrollPos = $(window).scrollTop();
  if (scrollPos >= currentSlide * winHeight) {
    nextSlide = currentSlide + 2;
    $('#sec-' + nextSlide).fadeIn();

    // as long as current slide is still in range of the number of sections
    // we increase it by one. 
    if (currentSlide <= sections.length) {
      currentSlide++;
    }
  }
});

----------

Update:

После комментария OP: "Я хочу, чтобы divs внутри секций исчезать в прокрутке, а не в div раздела, а те, что внутри него, поскольку их несколько", все, что нам нужно сделать, это изменить эту строку $(this).fadeOut(0); к этому $(this).children().fadeOut(0);, а затем эту строку:

$('#sec-' + nextSlide).fadeIn(); к этому $('#sec-' + nextSlide).children().fadeIn(1500);

и теперь, вместо самого раздела, мы затухаем и вынимаем всех дочерних элементов этого раздела.

JS Fiddle 2

Ответ 2

Я удивлен, что в предыдущем ответе было так много upvotes, когда событие scroll даже не срабатывает при использовании fullPage.js: D

Решение вашей проблемы подробно описано в fullPage.js часто задаваемых вопросах. В основном используется опция fullPage.js scrollbar:true или autoScrolling:false. Таким образом будет запущено событие прокрутки.

Если вы все еще хотите использовать эффекты выцветания при переходе из одного раздела в другой, в правильном решении используется fullPage.js callbacks или классы состояния fullpage.js, чтобы запустить анимацию. Это можно сделать, используя javascript или plain css 3.

Посмотрите пример использования анимации css3 в сочетании с классами состояния fullpage.js на этом видеоуроке.