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

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 的位置。但请注意，mousemove 将针对它移动的每个像素触发，并且我会使用大量处理时间，因此请谨慎使用它:)

Answer 3

好吧，因为你没有提供代码，所以很难说你应该如何确定 div 的位置，但基本上你应该编写一个函数来获取窗口高度和 div 相对于顶部的偏移量窗口来确定它是否高于 15%。然后，您需要每次使用 window.onscroll 事件侦听器调用此函数。当函数返回true时，触发触发window.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();
}

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