Reload the page just once if a div is above certain position

I want to reload the 开发者_运维百科page only once if a given div is positioned higher than position:absolute; top:15%.

I think this could be done with jQuery's .css method, something like:

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

Could someone suggest a simple solution, preferably jQuery or pure JavaScript?

If what you meant is the top of the document, you can probably try:

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

You can check the current position of a div using the Computed Style

If you are have a like an animation or a drag and drop, you can use the onmousemove event to track the position of the div. but be careful the mousemove will be trigger for every pixel it moves and it my use lots of process time, so be wise on how you use it :)

Well, it is rather hard to say how you should determine the position of the div since you presented no code, but basically you should write a function that fetches the window height and the offset of the div relative to the top of the window to determine whether it is higher than 15%. You then need to call this function every time using the window.onscroll event listener. When the function returns true, trigger trigger window.location.reload(true) to reload the page. I imagine this could be done fairly easily in jQuery as well.

the above answers point you in the right way, but in order to "reload the page only once", you need an extra ingredient. you need a way to store a flag that points out whether the page has already been reloaded or not.
Say you follow tradyblix's code.
You should check for that flag before reloading your page :

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

where hasReloaded is a function that determins if the page has been reloaded, and it can be either a function that sends an ajax request to a server, that checks a cookie or even the localStorage object:

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

In order to set that flag, your reload function needs to access the localStorage (or cookie or ajax server response) :

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

This is just a sketch of how you should write this functionality.