Question

如果给定的div位置高于position:absolute; top:15%，我只想重新加载一次页面。

我认为这可以通过jQuery的.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

您可以使用Computed Style

检查div的当前位置

如果你有像动画或拖放，你可以使用onmousemove事件来跟踪div的位置。但要小心，鼠标移动将触发它移动的每个像素，并且我使用大量的处理时间，所以明智地使用它：）

Answer 3

嗯，很难说你应该如何确定div的位置，因为你没有提供代码，但基本上你应该编写一个函数来获取窗口高度和div相对于顶部的偏移量。窗口确定它是否高于15％。然后，每次使用window.onscroll事件侦听器时都需要调用此函数。当函数返回true时，触发trigger.location.reload（true）触发器重新加载页面。我想这也可以在jQuery中相当容易地完成。

Answer 4

上述答案以正确的方式指出了您，但为了“仅重新加载页面一次”，您需要一个额外的成分。你需要一种方法来存储一个标志，指出页面是否已经重新加载假设您关注tradyblix's代码您应该在重新加载页面之前检查该标志：

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

这只是您应该如何编写此功能的草图。

如果div高于某个位置，则重新加载页面一次

4 个答案: