We Keep Coding

Reusing a Javascript function?

I have this simple read more JS function. I want to reuse it, what's the best practice for this? For example, below, I have two read more buttons but I have to copy paste the function and some number to it to use it. Not the cleanest way, what's a better way around this?
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
function myFunction2() {
var dots = document.getElementById("dots2");
var moreText = document.getElementById("more2");
var btnText = document.getElementById("myBtn2");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
#more {display: none;}
#more2 {display: none;}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, naliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida isi lorem egestas vitae scel<span id="dots2">...</span><span id="more2">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction2()" id="myBtn2">Read more</button>

First, when repeating behavior you should refrain from attempting to use id attributes since (as you know) they must be unique. Additionally, it leads to naming things without much meaning (thing1, thing2 etc).
One technique is to use the class attribute.
Each event allows access to the target of the event. We can find the paragraph to effect using the previousElementSibling to find the <p>.
From there, we can use that node to query for the .dots and .more classes and change them as needed.
Since the button is the target of the event, we just change the button text directly.
EDIT: Thanks #Carston for the previousElementSibling hint.
function myFunction(e) {
const paragraph = e.target.previousElementSibling;
var dots = paragraph.querySelector('.dots');
var moreText = paragraph.querySelector(".more");
if (dots.style.display === "none") {
dots.style.display = "inline";
e.target.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
e.target.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
.more {display: none;}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction(event)">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, naliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida isi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction(event)">Read more</button>

You could use a function parameter to dynamically add a suffix to your ids :
function myFunction(suffix) {
var dots = document.getElementById("dots" + suffix);
var moreText = document.getElementById("more" + suffix);
var btnText = document.getElementById("myBtn" + suffix);
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
#more {display: none;}
#more2 {display: none;}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction('')" id="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, naliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida isi lorem egestas vitae scel<span id="dots2">...</span><span id="more2">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction('2')" id="myBtn2">Read more</button>
Or 3 parameters corresponding to the ids :
function myFunction(dotsId, moreTextId, btnTextId) {
var dots = document.getElementById(dotsId);
var moreText = document.getElementById(moreTextId);
var btnText = document.getElementById(btnTextId);
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
#more {display: none;}
#more2 {display: none;}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction('dots','more','myBtn')" id="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, naliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida isi lorem egestas vitae scel<span id="dots2">...</span><span id="more2">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction('dots2','more2','myBtn2')" id="myBtn2">Read more</button>

use template literals like this:
function myFunction(number) {
var dots = document.getElementById(`dots${number}`);
var moreText = document.getElementById(`more${number}`);
var btnText = document.getElementById(`myBtn${number}`);
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
<button onclick="myFunction('')" id="myBtn">Read more</button>
<button onclick="myFunction2('2')" id="myBtn2">Read more</button>

I guess this answer was not really called for. In my opinion #RandyCasburn already nailed it. However, here is another version that works with even less html to put in place to create unfoldable sections.
By placing a <span class="more"></span> within a paragraph this section is marked to be "unfoldable". The first part of my script adds the three dots and a "Read more" button and makes the span's original content invisible.
The delegated click event handler then does all the work:
// prepare document once (put "..." and buttons in place):
document.querySelectorAll(".more").forEach(el=>{
el.dataset.html=el.innerHTML;
el.textContent="...";
const btn=document.createElement("button");
btn.className="morebtn";
btn.textContent="Read more";
el.closest("p").after(btn);
})
// delegated event attachment:
document.body.onclick=e=>{
if (e.target.className==="morebtn"){
const mor = e.target.previousElementSibling.querySelector(".more");
[mor.innerHTML,mor.dataset.html]=[mor.dataset.html,mor.innerHTML];
e.target.innerHTML = mor.textContent==="..."?"Read more":"Read less";
}
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, naliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida isi lorem egestas vitae scel<span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<p>And another paragraph with more nonsensical text that will only <span class="more">be shown completely, once the "Read more" button was hit.</span></div>

How can I prevent background scrolling in IOs?

I need to disable scrolling for the div # scrolling-disabled on mobile browsers for both iOS and Android devices. I can't use the position: fixed; trick or it will broke my layout. So I'm handling the touchmove event to prevent the default action. The code below works but only if you drag your finger directly in the div # scrolling-disabled element. If you drag your finger in the div # window element or even in the div # scrolling-enabled IOs will still scroll the element in the background, in this case, div # scrolling-disabled.
document.querySelector('#scroll-disabled').addEventListener('touchmove', function(event) { event.preventDefault(); });
#window
{
display: block;
position: fixed;
margin: 30px;
z-index: 999;
background-color: #fff;
border: 1px solid red;
}
#scroll-enabled
{
height: 100px;
overflow: auto;
border: 1px solid red;
margin: 10px;
}
#scroll-disabled
{
}
p
{
margin: 10px;
}
<html>
<body>
<div id="window">
<p><b>Scrolling should be disabled for the DIV element in the background (#scroll-disabled), but should still be possible in the DIV element below (#scroll-enabled).</b></p>
<div id="scroll-enabled">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
</div>
</div>
<div id="scroll-disabled">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
</div>
</body>
</html>
Here's the JSFiddle: https://jsfiddle.net/56z3aorc/2/
And direct link to results if you wanna try on mobile: https://jsfiddle.net/56z3aorc/2/show

I just found the solution myself.
Disable scrolling on the body or in the element you want by using event.preventDefault(); on a touchmove event listener.
After doing that, you can allow scrolling on the element you need by using event.stopPropagation(); on a touchmove event listener.
If you need to keep IOs from scrolling the elements in the background of the scrollable element (after it finnished it own scrolling) just do event.stopPropagation(); first and then (if the element is full scrolled) do event.preventDefault();.
I hope it helps other people having the same issue I was.

Enable checkbox when the user has scrolled to the bottom of a T&C page?

my html sample div class :
<div id="terms">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
</div>
<input id="payment" type="checkbox" disabled name="terms"> <span class="redSmall">I agree to terms and conditions</span>
my css :
#terms {width: 780px;height: 150px;overflow-y: scroll;border:2px solid #ccc;}
Can someone tell me the JS or JQuery for enabling the checkbox when the user has scrolled to the bottom of the T&C page ? I have tried other answers too but none of them worked. The checkbox remains disabled whatever I do.

use below script,
<script>
$( document ).ready( function() {
$('#terms').scroll(function () {
if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) {
$('#payment').removeAttr('disabled');
}
});
});
</script>
here is runnable demo : https://jsbin.com/cajusebera/edit?html,js,output

Im not a Jquery Expert but just by googling I created this example. I hope it helps!
jQuery(function($) {
$('#terms').on('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
$('#payment').removeAttr("disabled")
}
})
});
#terms {
width: 780px;
height: 150px;
overflow-y: scroll;
border: 2px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="terms">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
</div>
<input id="payment" type="checkbox" disabled name="terms"> <span class="redSmall">I agree to terms and conditions</span>

Make a div float whenever the bottom of it goes out of view

I'm able to add and remove classes that make a div float and unfloat, but I'm restricted to having to enter a scroll amount until the classes gets added.
What I'd like to have, is for the class to be added when the bottom of the div goes out of view, or past the viewport.
Likewise, for the class to be removed when the bottom of the div (in it's original place) can be seen again - although I'm not sure about this, as the div will always be visible now.. as it's being floated.
http://jsfiddle.net/r440tggy/
var header = $("#request-consultation");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 750) {
header.addClass("fixed-bottom-left");
} else {
header.removeClass("fixed-bottom-left");
}
});

Getting the element position before the scroll event makes sure that rendering problems don't happen.
You just need to get the elements position from the top, add the height and do a check against that.
var header = $("#request-consultation");
var element = header.offset().top + header.outerHeight();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= element) {
header.addClass("fixed-bottom-left");
} else {
header.removeClass("fixed-bottom-left");
}
});
#request-consultation {
float: right;
width: 250px;
border: 2px solid;
padding: 10px;
margin: 10px;
}
.fixed-bottom-left {
float: none;
position: fixed;
bottom: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="request-consultation">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>

Jquery/Javascript - Capture the position of the page screen or an element

I need to get a position of a DIV relative to the body or html tag.
So for example:
I have a element going up the screen.
When you scroll the page vertically, and the DIV is at certain height on the screen, it changes color.
When the DIV is off the screen, it changes back to its normal color.
I have done something similar to this, but I have to use Next/Previous buttons for it:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var number = 0;
var goSign = "";
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top-100},'slow','swing', function()
{
$('#'+id).css('background', '#8b00cb');
$('#'+(id-1)).css('background', 'none');
$('#'+(id+1)).css('background', 'none');
});
}
function iterate(goSign)
{
if(goSign == "next")
{
if(number < 12 && number >= 0)
{
goToByScroll(++number);
}
//alert(number);
}
else if(goSign == "previous")
{
if(number <= 12 && number >= 1)
{
goToByScroll(--number);
}
//alert(number);
}
}
</script>
</head>
<body>
<div style = "position:fixed; top:90px;right:200px;width:200px;height:50px">
Next<br/>
Previous
</div>
<div style="width:600px">
<div id="1">
<h1>1</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="2">
<h1>2</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="3">
<h1>3</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="4">
<h1>4</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="5">
<h1>1</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="6">
<h1>2</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="7">
<h1>3</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="8">
<h1>4</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="9">
<h1>1</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="10">
<h1>2</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="11">
<h1>3</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="12">
<h1>4</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
</div>
</body>
Is there a way to do this?
I was thinking of using jQuery .position() http://api.jquery.com/position/

.position() will give you the location of an element based on it's offset parent (so if the element is inside an absolutely positioned element you probably won't get the coordinates from the document element).
Try using .offset() instead:
Get the current coordinates of the first element in the set of matched
elements, relative to the document.
Source: http://api.jquery.com/offset
Here is a demo: http://jsfiddle.net/PNCbK/ (JSFiddle seems to be having issues right now, here is a JSBin of the same code: http://jsbin.com/ezobux/edit#javascript,html,live)