Как менять содержимое блока при прокрутке?

Question

[Наталия]

Добрый день!
Есть такая разметка:

<div class="wrapper">
   <div class="menu"> 
   </div>
   <div class="content">
      <div class="element name"> тут текст, который нужно выводить в другом блоке </div>
      <div class="element"> </div>
       <div class="element"> </div>

      <div class="element name"> тут текст, который нужно выводить в другом блоке  </div>
      <div class="element"> </div>

      ... и т.д. (кол-во элементов меняется)
   </div>
</div>

<div class="result"> </div>

хочется, чтоб при скролле страницы выполнялось следующее условие:
Прокручиваем страницу,
Как только попался элемент div class="element name" при .scrollTop() > 101,
выводится его содержимое в отдельный элемент div class="result".
Следующий попавшийся при прокрутке .scrollTop() > 101
элемент div class="element name" меняет содержимое предыдущего в div class="result". то есть перезаписывает содержание.

Пока сделала вот это,
но выводятся сразу все значения элементов element name одновременно:

$(document).scroll(function(){
   if ($(this).scrollTop() > 101) {
      $(".result").text($('.name').text());
   } else {
      $(".result").text('');
   }
}

Как можно доработать это?
Заранее спасибо за ответ.

Answer 1

[Антон Усачев]

Ну как-то так, например..

$(window).on('scroll', function() {
	var winScroll = $(window).scrollTop(),
		topMargin = 101,
		$resultBlock = $('.result');

	$('.element.name').each(function() {
		var $elemName = $(this),
			elemOffset = $elemName.offset().top,
			elemText = $elemName.html();

		if(elemOffset > winScroll + topMargin) {
			$resultBlock.html(elemText);
		}
	});
});

Comments

[Наталия]

спасибо за ответ, но в таком варианте страница сильно тормозит, практически становится мертвой: еле-еле по чуть-чуть скролл работает + сразу же в консоли выпадают значения. Мне сразу все значения выводить не нужно.

[Антон Усачев]

Наталия, хотелось бы взглянуть на проект. Скрипт этот типовой для подобных задач: выбираем все интересующие нас элементы, проверяем насколько они проскроллились, выполняем что-то для тех, что отвечают условиям. У меня уже много проектов за плечами с этой схемой, и ничто нигде не тормозит. Так что либо косяк в других функциях / библиотеках, либо у вас реально 100500 элементов на странице.

[Наталия]

rockfeeler, больше подходит последний вариант - много элементов.

[Антон Усачев]

Наталия, дьявол таится в мелочах. Просто перепутал оператор > и <. Теперь должно сработать нормально. topMargin это ваш отступ из примера. Если нужно другое значение - меняйте его.

$(window).on('scroll', function() {
	var winScroll = $(window).scrollTop(),
		topMargin = 101,
		$resultBlock = $('.result');

	$('.element.name').each(function() {
		var $elemName = $(this),
			elemOffset = $elemName.offset().top,
			elemText = $elemName.html();

		if (elemOffset < winScroll + topMargin) {
			$resultBlock.html(elemText);
		}
	});
});

[Наталия]

Антон Усачев, да, теперь работает как надо! Спасибо огромное!

[Наталия]

Антон Усачев, а можно ли определить для первого элемента topMargin = 101, а для всех последующих - topMargin = 39 ?

[Антон Усачев]

Наталия, можно. Я напишу позже, сейчас не у компа. Или кто-то из читателей может это сделать за меня. )

[Антон Усачев]

Наталия,

function setResultText() {
	var winScroll = $(window).scrollTop(),
		topMargin = 101,
		$resultBlock = $('.result'),
		$elements = $('.element.name'),
		elemsLen = $elements.length;

	for (var i = 0; i < elemsLen; i++) {
		var $theElem = $elements.eq(i),
			elemOffset = $theElem.offset().top,
			elemText = $theElem.html();

		if (i > 0) {
			topMargin = 39;
		}

		if (elemOffset < winScroll + topMargin) {
			$resultBlock.html(elemText);
		}
	}
}

$(window).on('scroll', function() {
	setResultText();
});

$(function() {
	setResultText();
});