Запуск путевой точки, когда на полпути через div

У меня есть div, содержащий длинное многостраничное сообщение в блоге. Длина зависит от содержимого. Я хотел бы вызвать путевую точку, когда третья часть через div. Я понимаю функцию смещения, но это похоже на то, как далеко по экрану появляется div. У меня нет возможности изменять HTML для включения любого идентификатора; Мне нужно было бы сделать это через Javascript полностью.Запуск путевой точки, когда на полпути через div

$('.article-body').waypoint({ 
    handler: function() { 
    alert('Hit midpoint of my context'); 
    }, 
    context: ".article-body", 
    offset: $(".article-body").height * 0.33 
});

Пример HTML:

<body> 
    <div class="article-body"> 
     CONTENT CONTENT CONTENT 
    </div> 
<body>

источник

2015-07-27 thumbtackthief

Добавьте часть кода, который вы сделали. Это поможет нам лучше понять, что вы хотите. Благодарю. – Zanoldor

Я включил все релевантные; есть что-то, что я пропустил, это было бы полезно? – thumbtackthief

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

Я вижу ответ Даниила был принят, но вот как это сделать с Waypoints:. функция смещения, которая возвращает отрицательное число.

Смещения всегда соответствуют расстоянию от вершины элемента до верха окна. Допустим, у нас есть элемент высотой 300 пикселей. Если мы установим смещение на -100, которое будет иметь эффект запуска, когда прокручивается верхняя треть элемента. Теперь давайте сделаем эту динамическую функцию:

offset: function() { 
    return this.element.offsetHeight/-3; 
}

источник

2015-08-14 03:38:58 imakewebthings

Perfect. Я добавлю, что мне нужно вызвать путевую точку, когда нижняя часть элемента, введенная/оставленная, просто используется 'return - (this.element.offsetHeight);' (или вы можете использовать 'return this.element.offsetHeight/-1; ' – iamkeir

Это неаккуратно с глобальными переменными, но вы получите идею; суть этого заключается в том, чтобы заранее определить, где вы хотите, чтобы ваша «путевая точка» срабатывала, затем прокрутите окно окна до тех пор, пока оно не достигнет этой точки.

(Обратите внимание, что если ваш контент изменяется после загрузки страницы, вам нужно будет пересчитать waypointPos. Вы можете рассчитывать его на лету каждый раз, но событие прокрутки достаточно часто срабатывает, что может вызвать лаги, я бы опросил положение прокрутки окна на более медленном интервале, а не делать вычисление DOM постоянно во время окна прокрутки)

// determine the scroll position where we want to do something, which is the element's top offset plus half of its height: 
 
var waypointPos = ($('.hasWaypoint').height()/2) + $('.hasWaypoint').offset().top; 
 

 
// watch window scroll until we search that point: 
 
var waypointTriggered = false; 
 
$(window).scroll(function() { 
 
    if (!waypointTriggered && $(window).scrollTop() >= waypointPos) { 
 
    alert("Halfway there!"); 
 
    waypointTriggered = true; // don't keep triggering endlessly 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p style="height:200px">This is extra stuff whose height we want to ignore</p> 
 
<div class="hasWaypoint" style="height: 3000px;border:1px solid">This is the big div</div>

источник

2015-07-27 19:31:45

Запуск путевой точки, когда на полпути через div

ответ

Смежные вопросы