Как вызвать класс, который отображается только с wapoints - PullRequest
Новая
       24

Как вызвать класс, который отображается только с wapoints

0 голосов
/ 28 сентября 2018

У меня есть несколько разделов с классом blockList li в каждом из этих разделов.Как я могу вызвать только текущие элементы blockList li для тех, которые отображаются?В настоящее время, когда какой-либо из элементов списка отображается, все они запускаются по всей странице, даже если они не отображаются.

Фрагмент ниже иллюстрирует возникшую у меня проблему. 

$('.blockList').waypoint(function() {
		$('.blockList li').each(function(index) {
			setTimeout(()=>{
				$(this).addClass('active');
			}, 200*index);			 
		});
	}, {
		offset: '60%'
	});
#blue, #red {
  width: 100%;
  height: 100vh;
}
#blue {
  background: blue;
}
#red {
  background: red;
}
.blockList {
	margin: 15px 0;
	text-align: left;
}
.blockList li {
	font-size: 1rem;
	color: #FFF;
	margin: 20px 0;
	opacity: 0;
	-webkit-transition: ease 0.4s;transition: ease 0.4s;
	-webkit-transform: translateY(-15px);transform: translateY(-15px);
}
.blockList li.active {
	opacity: 1;
	-webkit-transform: translateY(0px);transform: translateY(0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<section id="blue">
  <ul class="blockList">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
  </ul>
</section>
<section id="red">
  <ul class="blockList">
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
  </ul>
</section>

1 Ответ

0 голосов
/ 28 сентября 2018

Вы добавляете активный класс к элементам li для всех из них. 

$('.blockList li').each(function(index) {
    setTimeout(()=>{
        $(this).addClass('active');
    }, 200*index);           
});

TL: TR

В более короткие сроки.Вы добавляете активный класс два раза в каждый элемент списка.Так как вы добавляете его в начале, а затем добавляете его со смещением 60%.

Он проходит через все li и помещает активный класс.Таким образом, поэтому он не должен быть в поле зрения, так как его добавление под нагрузкой.

Одним из решений может быть получение позиции в браузере второго объекта или создание компактной системы, которая проверяет все их места в массиве.Таким образом, он проверяет свою позицию -> при проверке прокрутки, если достигнут какой-либо из элементов -> если достигнут, добавьте активный класс к базовому идентификатору. 

var p = $( "#red" ).position;
var Positions = {top: p.top};

Затем найдите свое центральное положение окна Что-то вроде: 

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
    return this;
}

Затем сравните их, если он достиг элемента.

Затем получите его идентификатор и добавьте .active класс к #red li, а не к лицу li.

Что бы я сделал в этой ситуации: 

var global_list = {}; var elemCount = 0;
$(document).ready(function() {
	//call initFunc, after its complete, call elimination (so it would check on load) and then set on scroll.
	initFunc(function() {
    elimination();
    $(document).on('scroll', function() { elimination() });
  });

	//This function is basicaly your startup.
  function initFunc(int) { 
      $('.blockList').each(function() {
          var p = $(this).position(); //Lets get its position.
          var id = $(this).attr('id'); //Lets get its ID
          global_list[id] = p.top; //Lets asign ID -> topPosition, so { first: 8 }...
          elemCount++;
      });
      
      int();
  }
  
  //This assigns needed stuff for allready reached objects.
  function elimination() { 

    
    if(elemCount != 0) { //Did we allready show all elements?
      var cb = $(this).scrollTop() + ($(this).height()), ct = $(this).scrollTop(); //Gets top position, and bottom.
      var cP = ct + ((cb - ct)/2); //Gets your center point of viewport - ad half screen size to top;
      for(var k in global_list) { //Loop trough all element that are left and see if we did scroll.
        if(global_list[k] <= cP) { //Lets check if user scolled to it.
     				var ic=0;
        		$('#'+k+' li').each(function() {
            	setTimeout(()=>{
                $(this).addClass('active');
              }, 200*ic);	
              ic++
            });
            delete global_list[k]; //Lets delete allready assigned classes
            elemCount--; //Decreses elements count, so eventualy once all reached, it becomes 0;
        }
      }
    }
  }
});
#first {
  height: 1000px;
}

#second {
  height: 1000px;
}

.beatiful {
  background: yellow;
}

.div_div li {
  	font-size: 1rem;
	color: #000;
	margin: 20px 0;
	opacity: 0;
	-webkit-transition: ease 0.4s;transition: ease 0.4s;
	-webkit-transform: translateY(-15px);transform: translateY(-15px);
}

.div_div li.active {
  	opacity: 1;
	-webkit-transform: translateY(0px);transform: translateY(0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='div_div' id='first'>
  <ul class="blockList" id='first'>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
  </ul>
</div>
<div class='div_div' id='second'>
  <ul class="blockList" id='second'>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
  </ul>
</div>
...