Перезагрузите страницу только один раз, если div выше определенной позиции

Question

Я хочу перезагрузить страницу только один раз, если данный div расположен выше position:absolute; top:15%.

Я думаю, что это можно сделать с помощью метода jcuery .css, например:

if ('#mydive').css('top') > '15%' {
    //reload the page
}

Может ли кто-нибудь предложить простое решение, предпочтительно jQuery или чистый JavaScript?

Answer 1

Если вы имеете в виду верхнюю часть документа, вы можете попробовать:

var percent = .15; // 15%
if ($('#yourdiv').offset().top > ($(document).height() * percent)) {
    window.location.reload();
}

// if by pixels
var pixels = 10; // 10px
if ($('#yourdiv').offset().top > pixels) {
    window.location.reload();
}

Answer 2

приведенные выше ответы указывают на ваше правильное направление, но для того, чтобы «перезагрузить страницу только один раз», вам нужен дополнительный ингредиент.вам нужен способ сохранить флаг, который указывает, была ли страница уже перезагружена или нет.
Допустим, вы следуете за кодом tradyblix.
Вы должны проверить этот флаг перед перезагрузкой вашей страницы:

if (hasReloaded() && $('#yourdiv').offset().top > ($(document).height() * percent)) {
     reload();
}

где hasReloaded - это функция, которая определяет, была ли страница перезагружена, и это может быть либо функция, которая отправляет ajax-запрос на сервер, который проверяет cookie или даже объект localStorage:

function hasReloaded(){
    return !!localStorage['reloaded'];
}

Чтобы установить этот флаг, вашей функции reload необходим доступ к localStorage (или ответу cookie или ajax-сервера):

function reload(){
    localStorage['reloaded'] = true;
    window.location.reload();
}

Это всего лишь эскизо том, как вы должны написать эту функциональность.

Answer 3

Что ж, довольно сложно сказать, как вы должны определить положение div, поскольку вы не представили код, но в основном вы должны написать функцию, которая выбирает высоту окна и смещение div относительно вершины. окно, чтобы определить, является ли он выше, чем 15%. Затем вам нужно каждый раз вызывать эту функцию, используя прослушиватель событий window.onscroll. Когда функция вернет true, запустите триггер window.location.reload (true), чтобы перезагрузить страницу. Я полагаю, что это можно сделать довольно легко и в jQuery.

Answer 4

Вы можете проверить текущую позицию div, используя Computed Style

Если у вас есть подобная анимация или перетаскивание, вы можете использовать событие onmousemove, чтобы отследить положение div. но будьте осторожны, перемещение мыши будет срабатывать для каждого пикселя, который он перемещает, и это может занять много времени, поэтому будьте мудры, как вы его используете:)